ノードを子ノードの中の指定ノードの前または後ろに追加

ノードを子ノードの中の指定ノードの前または後ろに追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを子ノードの中の指定ノードの前に追加する(before)】ChildNodeオブジェクトのbeforeメソッドはノードを子ノードの中の指定ノードの前に追加します。書式：childnode.before(node[,node,...])引数には追加するNodeオブジェクトまたはDOMStringオブジェクトを指定します。DOMStringオブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。サンプルブラウザを立ち上げる表示されたボタンをクリックすると、まずliタグの新しい要素ノードとテキストノードを作成...ノードを子ノードの中の指定ノードの前または後ろに追加

JS--子ノードの追加

ノードを子ノードの中の先頭または最後に追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを子ノードの先頭に追加する】ParentNodeオブジェクトのprependメソッドはノードを子ノードの先頭に追加します。書式：parentnode.prepend(node[,node,...])引数には追加するNodeオブジェクトまたはDOMStringオブジェクトを指定します。DOMStringオブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、まとめて追加されます。例えば追加するノードとしてdivタグの要素ノードを新しく作成し、追加先としてid属性がxxxのノードの子ノードの先頭に追加するには次のように記述します。letp...JS--子ノードの追加

JS--ノードの作成

ノードの作成【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【要素ノードを作成する】DocumentオブジェクトのcreateElementメソッドは新しい要素ノードを作成します。書式；document.createElement(localname)1番目の引数に作成する要素ノードのタグ名をDOMStringオブジェクトで指定してください。戻り値はElementオブジェクトが返ります。例えばdivタグをの要素のノードを新しく作成するletelement=document.createElement('div');console.log(element.nodeName);>>DIVconsole.log(element.nodeType);>>1console.log(elem...JS--ノードの作成

JS--スタイルの取得と設定

スタイルの取得と設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【スタイルの基本】HTMLでは要素に対するスタイルの設定をstyleタグや個々の要素に対するstyle属性で設定できます。(外部のスタイルシートに記述しておき読み込むこともできます)。styleタグのサンプルこのページにはpタグが2つ含まれまれています。styleタグの中でpタグに対して文字色とフォントサイズに関するスタイルを設定しており、どちらのpタグにも同じようにスタイルが適用されていますブラウザを立ち上げる次に個々のpタグに対してstyle属性を使ってスタイルを設定するリロードする1つ目のpタグにはsytleタグでは設定していない種類のスタイルを設定している。（フォントの太さ）2つ目のpタグでは、style...JS--スタイルの取得と設定

JS--要素に設定された属性を削除

要素に設定された属性を削除【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【属性を削除する】ElementオブジェクトのremoveAttributeメソッドは、対象の要素に設定されている属性を削除します。書式：element.removeAttribute(qualifiedName)引数には削除する属性の属性名をDOMStringオブジェクトで指定します。設定されていない属性名を指定した場合は何も行いません。サンプルブライザを立ち上げる表示されたボタンをクリックすると、id属性の値が'shopinfo'の要素ノードを取得し、最初の子要素に設定されている属性の中でclass属性とtarget属性を削除します。そのあとで残っている属性を取得し名前と値をコンソールに出力します。JS--要素に設定された属性を削除

JS--要素に設定された属性の一覧を取得

要素に設定された属性の一覧を取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【属性の一覧を取得する(attributesプロパティ)】Elementオブジェクトのattributesプロパティを参照すると、要素に設定されている属性の一覧を参照することができます。書式：element.attributes参照できる値は、属性名と属性値の情報が格納されたAttrオブジェクトの集合であるNamedNodeMapオブジェクトです。NamedNodeMapオブジェクトではlengthプロパティで格納されているAttrオブジェクトの数を参照できます。またitemメソッドで引数に指定したインデックスのAttrオブジェクトを取得できます。そしてAtrrオブジェクトではnameプロパティで属性...JS--要素に設定された属性の一覧を取得

JS--id属性やclass 属性の取得及び設定

id・classなどの属性の取得及び設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【属性とは】属性とは、HTMLのタグに補足情報を与える役割を持つもので、一般的には、id属性・class属性のようにタグに名前を付けたり、飾りをつけたり、働きを調整したりすることができます。【属性の指定方法】＜要素名属性名="属性値"＞〇〇の〇〇は〇〇です属性値を囲む引用符は「"（ダブルクオート）」の代わりに、「'（シングルクオート）」を使っても構いません。【属性値を取得する(プロパティ)】JavaScriptからはプロパティや、メソッドを使って属性値を参照したり新しい値を設定することができます。要素に設定された属性値は次のようにプロパティ名として属性名を指定して参照することができます。書式：...JS--id属性やclass属性の取得及び設定

要素内のHTMLを取得・設定

要素内のHTMLを取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【HTML文を参照する】innerHTMLプロパティは、HTMLElementオブジェクトのinnerTextプロパティと違って、HTML要素を含んで参照される。書式；element.innerHTML戻り値は要素に含まれるHTML文が文字列で戻されます。HTML文はHTMLファイルに記述されている内容をそのまま取得します。例えば次のdiv要素ノードのinnerHTMLプロパティの値を参照した場合、どのような値を返すのか確認します。＜div＞＜p＞Apple＜br＞Lemon＜/p＞＜p＞Orange＜/p＞＜/div＞div要素ノードにはの2つのp要素ノードが含まれています。要素内のHTML文をそのまま...要素内のHTMLを取得・設定

要素内のレンダリングされたテキストを取得・設定

要素内のレンダリングされたテキストを取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【テキストを参照する】HTMLElementオブジェクトのinnerTextプロパティを参照すると要素および要素の子孫要素のテキストを取得することができます。書式；htmlElement.innerText戻り値は、すべてのテキストが連結されたDOMStringオブジェクトが戻されます。どのような文字列が返されるのかについては、要素や要素の子孫要素がブラウザで表示されるときと同じ内容のテキスト内容を取得します。空白ノードなどのようにブラウザでは表示されないものは取得しませんし、スタイルシートの設定などで非表示になっている要素。＜style＞タグのように元々ブラウザに表示されない要素のテキ...要素内のレンダリングされたテキストを取得・設定

JS--ノード内のテキストを取得・設定

ノード内のテキストを取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【テキストを参照する】NodeオブジェクトのtextContentプロパティを参照するとノードおよびノードの子孫ノードのテキストをすべて連結した値を取得することができます。書式；node.textContent戻り値はすべてのテキストが連結されたDOMStringオブジェクトが戻されます。実際にどのようなデータがテキストとして返されるのかは、ノードの種類によって異なります。*1と記述したノードについては、コメントと処理命令ノード以外のすべての子ノードのtextContentの値を連結した文字列を返します。それぞれのノードでNode.nodeValueがどのような値を返すのかは「ノードの値を取得・設定(n...JS--ノード内のテキストを取得・設定

JS--ノードの値を取得・設定

ノードの値を取得・設定【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードの値を参照する】NodeオブジェクトのnodeValueプロパティを参照するとノードの値を取得することができます。書式；node.nodeValue戻り値はノードの値がDOMStringオブジェクトで戻されます。どのような値が返されるのかはノードの種類によって異なっています。例えばノードの種類がTEXT_NODE(テキストノード)の場合、テキストノードに含まれるテキストが返されます。サンプルブラウザを立ち上げるボタンを押すと、pタグのノードをすべて取得します。そのあとで、pタグの子ノードであるテキストノードを取得するためにそれぞれの最初の子ノードを取得します。最後にテキストノードのノードの値を取得し、コ...JS--ノードの値を取得・設定

JS--ノード名の取得

ノード名の取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【ノードの名前を取得する】NodeオブジェクトのnodeNameプロパティを参照するとノードの名前を取得することができます。書式；node.nodeName戻り値はノードの名前を表すDOMStringオブジェクトが戻されます。名前はノードの種類によって異なっています例えばノードの種類がELEMENT_NODE(要素ノード)の場合は、要素のタグ名がノードの名前として返されます。ノードの種類がTEXT_NODE(テキストノード)の場合、常に"#text"という値がノードの名前として返されます。サンプルブラウザを立ち上げるボタンを押すと、id属性の値が'blog'のノードを取得し、そのノードの子ノードをすべて取得します。そのあとで...JS--ノード名の取得

JS--ノードの種類を取得

ノードの種類を取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【ノードの種類を確認する】NodeオブジェクトのnodeTypeプロパティを参照するとノードの種類を確認することができます。書式；node.nodeType戻り値はノードの種類を表すunsignedshort型の値が戻されます。どの値がどのノードの種類になるのかは次の一覧を見てください。ノードを取得したあと、ノードのnodeTypeプロパティを参照することで取得したノードの種類を確認することができます。サンプル＜!DOCTYPEhtml＞＜htmllang="ja"＞＜head＞＜metacharset="UTF-8"＞＜title＞nodeType＜/title＞＜/head＞＜body＞＜p＞今日は外でランチを食べま...JS--ノードの種類を取得

ノードの子・親・兄弟ノードを取得--2

最初の子ノードと最後の子ノードを取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、【最初の子ノードと最後の子ノードを取得する】1，firstChildプロパティこのノードの1つ下の階層にある子ノードの中の最初のノードを取得することが出来る。書式；node.firstChild2，lastChildプロパティ】このノードの1つ下の階層にある子ノードの中の最後のノードを取得することが出来る。書式；node.lastChildこれらの戻り値としてNodeオブジェクトを返します。子ノードがなかった場合はnullが返ります。例えば特定のノードの子ノードの中で最初と最後の子ノードを取得するには次のように記述します。letelement=document.getElementById('mai...ノードの子・親・兄弟ノードを取得--2

ノードの子・親・兄弟ノードを取得--1

ノードの子・親・兄弟ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【すべての子ノードを取得する】DocumentオブジェクトのgetElementByIdメソッドやquerySelectorメソッドなどを使って要素ノードを取得したあと、NodeオブジェクトのchildNodesプロパティを参照することで、このノードの1つ下の階層にある子ノードをすべて取得することができます。・書式node.childNodesこのプロパティは参照専用です。戻り値としてNodeListオブジェクトを返します。NodeListオブジェクトは複数のノードの集合です。NodeListオブジェクトではlengthプロパティとitemメソッドが用意されており、次のように取得したノードの数を取得したり、...ノードの子・親・兄弟ノードを取得--1

querySelectorのサンプル

querySelectorのサンプル【開発環境】OS：Win11（64ビット）VSCode1.72.2、【querySelectorのサンプル】querySelectorメソッドはCSSセレクタ形式で条件を指定して要素ノードを取得する。ブラウザを立ち上げるボタンを押すとコンソールに表示されたら、OK【querySelectorAllのサンプル】querySelectorAllメソッドを使ったサンプルを試してみます。querySelectorAllメソッドは条件に一致するすべての要素ノードを取得します。ブラウザを立ち上げるボタンを押すquerySelectorのサンプル

CSSセレクタ形式の条件に一致する要素ノードを取得

CSSセレクタ形式の条件に一致する要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【querySelectorメソッドおよびquerySelectorAllメソッド】querySelectorメソッドおよびquerySelectorAllメソッドは、CSSのセレクタ形式で条件を指定して一致する要素ノードを取得します。id要素の指定といった簡単なものから条件を組み合わせた複雑なものまで指定することができます。【querySelectorメソッド】querySelectorメソッドはCSSセレクタ形式で条件を指定して要素ノードを取得します。・書式document.querySelector(selectors)引数にはCSSセレクタ形式の値をDOMStringオブジェクトで...CSSセレクタ形式の条件に一致する要素ノードを取得

name属性の値を指定して要素ノードを取得

name属性の値を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【getElementsByNameメソッド】DocumentオブジェクトのgetElementsByNameメソッドはname属性の値を指定して要素ノードを取得します。・書式document.getElementsByName(name)引数にはname属性の値をDOMStringオブジェクトで指定します(例えば'hobby'など)。戻り値はNodeListオブジェクトです。NodeListオブジェクト→複数の要素ノードの集合です。NodeListオブジェクトではlengthプロパティとitemメソッドが用意されており、次のように取得した要素ノードの数を取得したり、指定の要素ノードを取り出すこと...name属性の値を指定して要素ノードを取得

class属性の値を指定して要素ノードを取得

class属性の値を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、【getElementsByClassNameメソッド】DocumentオブジェクトのgetElementsByClassNameメソッドは、要素のclass属性の値を指定して一致する要素ノードをすべて取得します。【書式と使い方】・書式document.getElementsByClassName(classnames)引数にはclass属性の値をDOMStringオブジェクトで指定します(例えば'box'など)。複数のclass属性の値を指定することができ、指定した値のいずれかに一致する要素ノードをすべて取得します。その場合は空白文字で区切って指定します(例えば'boxmenu'など)。戻り値...class属性の値を指定して要素ノードを取得

タグ名を指定して要素ノードを取得

タグ名を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【getElementsByTagNameメソッドとは】getElementsByTagNameメソッドは、要素のタグ名を指定して一致する要素ノードをすべて取得します。【getElementsByTagNameの書式と使い方】DocumentオブジェクトのgetElementsByTagNameメソッドはタグ名(要素名)を指定して要素ノードを取得します。・書式はdocument.getElementsByTagName(tagname)引数にはタグ名をDOMStringオブジェクト(文字列と考えて頂いて構いません)で指定します(例えば'div'や'p'など)。タグ名に'*'を指定した場合はすべての要素...タグ名を指定して要素ノードを取得

id属性の値を指定して要素ノードを取得法

id属性の値を指定して要素ノードを取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【getElementByIdの書式と使い方】DocumentオブジェクトのgetElementByIdメソッドはid属性の値を指定して要素ノードを取得します。・書式document.getElementById(id)引数にはid属性の値をDOMStringオブジェクトで指定します(例えば'example'など)。戻り値はElementオブジェクトです。見つからなかった場合はnullが返されます。例えばid属性の値として'example'が設定された要素ノードを取得するには次のように記述します。letelement=document.getElementById('example');id属性...id属性の値を指定して要素ノードを取得法

JS--DOM

DOMとは【DOMとは】DOMとはDocumentObjectModelの略でHTMLやXMLのドキュメントに含まれる要素や要素に含まれるテキストのデータをオブジェクトとして扱い、ドキュメントをオブジェクトが階層的に組み合わされたものとして識別し、JavaScriptなど色々なプログラミング言語などから、オブジェクトを扱うためのAPIを提供している。DOMは標準化団体であるW3Cで以前は標準化が行われていましたが、現在ではWHATWGによって標準化が行われています。【ノードとは】DOMではドキュメントを構成するオブジェクトのことを「ノード」と呼びます。ノードはさらに種類に応じて「要素ノード」「テキストノード」「属性ノード」などに分類されます。【DOMの階層構造】DOMでは対象となるドキュメントをノートの階...JS--DOM