HTML DOMの基礎知識
1. DOMとは？
1. HTML DOM は、HTML ドキュメントにアクセスして操作するための標準メソッドを定義します。
2. HTML DOM は、HTML ドキュメントを要素、属性、テキストを含むツリー構造 (ノード ツリー) として表現します。
3. JavaScript を使用して、HTML ドキュメント全体を再構築できます。ページ上の項目を追加、削除、変更、または並べ替えることができます。ページ上の何かを変更するには、JavaScript が HTML ドキュメント内のすべての要素にアクセスする必要があります。このエントリは、HTML 要素を追加、移動、変更、削除するためのメソッドとプロパティとともに、ドキュメント オブジェクト モデル (DOM) を通じて取得されます。 DOM は JavaScript で使用され、HTML、XHTML、および XML ドキュメントの読み取りと変更を行うことができます。
4. DOM は、さまざまな部分 (コア、XML、HTML) とレベル (DOM レベル 1/2/3) に分かれています。
*コア DOM: あらゆる構造化ドキュメントの標準オブジェクトのセットを定義します。 *XML DOM: XML ドキュメントの標準オブジェクトのセット *HTML DOM: HTML ドキュメントの標準オブジェクトのセットを定義します。
2. HTML DOM ノードとノード ツリー
1. ノード
DOM によれば、HTML ドキュメント内の各コンポーネントはノードです。
DOM は以下のように指定します:
ドキュメント全体がドキュメントノード 各HTMLタグが要素ノード HTML要素に含まれるテキストがテキストノード 各HTML属性が属性ノード コメントはコメントノード に属します
2. ノードの階層
ノードは相互に階層関係を持ちます。
HTML ドキュメント内のすべてのノードはドキュメント ツリー (またはノード ツリー) を形成します。 HTML ドキュメント内の各要素、属性、テキストなどは、ツリー内のノードを表します。ツリーはドキュメント ノードから始まり、そこからツリーの最下位レベルにあるすべてのテキスト ノードに分岐し続けます。
下の図はドキュメントツリー(ノードツリー)を表しています:
3. ノードツリー
1 <html>2 <head>3 <title>DOM Tutorial</title> 4 </head> 5 <body> 6 <h1>DOM Lesson one</h1> 7 <p>Hello world!</p> 8 </body> 9 </html>
上のすべてのノードは相互に関係を持っています。
*ドキュメントノードを除くすべてのノードには親ノードがあります。たとえば、93f0f5c25f18dab9d176bd4f6de5d30e と 6c04bd5ca3fcae76e30b72ad730ca86d の親ノードは 100db36a723c770d327fc0aef2ce13b1 ノード、「Hello world!」の親ノードは e388a4556c0f65e1904146cc1a846bee です。
*ほとんどの要素ノードには子ノードがあります。たとえば、
ノードには、
ノードという子ノードがあります。 b2386ffb911b14667cb8f0f91ea547a7 ノードには、テキスト ノード「DOM Tutorial」という子ノードもあります。 <p> ※同じ親ノードを共有するノードはピア（兄弟ノード）となります。たとえば、4a249f0d628e2318394fd9b75b4636b1 と e388a4556c0f65e1904146cc1a846bee は、親ノードが 6c04bd5ca3fcae76e30b72ad730ca86d であるため、ピアになります。 </p> <p> *ノードには、ノードのすべての子ノード、またはこれらの子ノードの子ノードなどを参照する子孫を持つこともできます。たとえば、すべてのテキスト ノードは 100db36a723c770d327fc0aef2ce13b1 ノードの子孫であり、最初のテキスト ノードは 93f0f5c25f18dab9d176bd4f6de5d30e ノードの子孫です。 </p> <p> *ノードには先祖を持つこともできます。祖先は、ノードの親ノード、または親ノードの親ノードなどです。たとえば、すべてのテキスト ノードは、祖先ノードとして 100db36a723c770d327fc0aef2ce13b1 ノードを持つことができます。 </p> <h2>3. HTML DOM のノードにアクセスする方法 </h2> <p>1.ノードを見つけてアクセスします</p> <p>操作したい要素はいくつかの方法で見つけることができます: </p> <li> getElementById() メソッドと getElementsByTagName() メソッドを使用する</li> <li> 要素ノードのparentNode、firstChild、lastChildプロパティを使用する</li> <p> <strong>２ ． getElementById() </strong> および <strong>getElementsByTagName()</strong></p> <p><strong>(1) getElementById() は、指定された ID で要素を返すことができます。構文: </strong></p> <p class="sycode"> <pre class="precsshui">document.getElementById("ID"); </pre> </p> <p> </p> <p><strong>(2) getElementsByTagName() メソッド指定されたものを使用しますtagname は、このメソッドを使用すると、現在の要素の子孫であるすべての要素を (ノード リストとして) 返します。 getElementsByTagName() は任意の HTML 要素に使用できます: </strong></p> <p><strong> 構文: </strong></p> <p class="sycode"> <pre class="precsshui">document.getElementsByTagName("标签名称"); </pre> </p> <p><strong> または: </strong></p> <p class="sycode"> <pre class="precsshui">document.getElementById('ID').getElementsByTagName("标签名称"); </pre> </p> <p>＜ノードリストにアクセスするときのインデックス番号は 0 から始まります＞</p> <p> <strong>３ ． parentNode、firstChild、lastChild</strong></p> <p>これら 3 つのプロパティparentNode、firstChild、lastChild はドキュメントの構造に従い、ドキュメント内で「短距離移動」を実行できます。 firstChild の最も一般的な使用法は、要素のテキストにアクセスすることです。parentNode 属性は、ドキュメントの構造を変更するためによく使用されます。ルート ノード </p> <p> ルート ノードへのアクセスに使用できる特別なドキュメント プロパティが 2 つあります: </p>
<li>document.documentElement</li> <li>document.body</li> <p> 最初のプロパティは、XML ドキュメントと HTML ドキュメントに存在するドキュメント ルート ノードを返します。 </p> <p> 2 番目の属性は、6c04bd5ca3fcae76e30b72ad730ca86d タグへの直接アクセスを提供する HTML ページへの特別な拡張機能です。 </p> <p> </p> <p> </p> <p> </p> <h2> 4つ。ノード情報 </h2> <p>各ノードには、ノードに関する情報を含む属性があります。これらのプロパティは次のとおりです: </p> <li>nodeName (ノード名) </li> <li>nodeValue (ノード値) </li> <li>nodeType (ノードタイプ) </li> <p class="sycode"> </p>
<p>１。 nodeName</p> <p>nodeName 属性にはノードの名前が含まれます。 </p> <li>要素ノードのnodeNameはタグ名です</li> <li>属性ノードのnodeNameは属性名です</li> <li>テキストノードのnodeNameは常に#text</li>です <li>ドキュメントノードのnodeNameは常に#document</li>です <p>注: nodeName は、含まれる XML 要素のタグです。名前は常に大文字で表記されます </p> <p class="sycode"> </p>
<p>２。 nodeValue</p> <p> テキスト ノードの場合、nodeValue 属性にはテキストが含まれます。 </p> <p> 属性ノードの場合、nodeValue 属性には属性値が含まれます。 </p> <p>nodeValue プロパティは、ドキュメント ノードと要素ノードでは使用できません。 </p> <p class="sycode"> </p>
<p>３． nodeType</p> <p>nodeType プロパティはノードのタイプを返します。 </p>
<br><p></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
<p class="sycode"></p>
