html domノード操作（取得・変更・追加・削除）_javascriptスキル

HTML DOM は、HTML 要素を取得、変更、追加、または削除する方法の標準です。 HTML DOM では、すべてがノードです。 DOM は、ノードのツリーとして表示される HTML です。

W3C の HTML DOM 標準によれば、HTML ドキュメント内のすべてのコンテンツはノードです。

ドキュメント全体がドキュメント ノードです
各 HTML 要素は要素ノードです
HTML element 内部のテキストはテキスト ノードです
各 HTML 属性は属性ノードです
注釈はコメント ノードです

HTML DOM は HTML ドキュメントをツリー構造として扱います。この構造はノード ツリーと呼ばれます。
HTML DOM ツリー インスタンス

http://www.w3school.com.cn/i/ct_htmltree.gif

HTML DOM を通じて、ツリー すべてのノードには JavaScript 経由でアクセスできます。すべての HTML 要素 (ノード) を変更でき、ノードを作成または削除できます。

すべての HTML 要素はオブジェクトとして定義され、プログラミング インターフェイスはオブジェクト メソッドとオブジェクト プロパティです。

1: 要素ノードの取得メソッド:

1.var node = document.getElementById("nodeId");

2.var nodelist = document.getElementsByClassName("nodeclassname) ");

3.var nodelist = document.getElementsByTagName("nodetagname");

2: 要素ノードを取得した後に実行できる操作: 1. それ自体に対する操作。 2. 子ノードでの操作。 3. 兄弟ノードでの操作。 4. 親ノードに対する操作

2.1. ノード自体を削除します。

2.2. 子ノードがあるかどうかを確認します。

子ノードのリストを取得します: var childList = node.childNodes;

ノード要素の型を取得します: var nodetype = node.nodeType; >子ノードを削除します。 node.removeChild(childNode);

子ノードの末尾に子ノードを挿入します:node.appendChild(childNode);

子ノードの末尾に子ノードを挿入します。 node.insertBefore(childNode );

ノード B をノード A に置き換えます。

2.3.node.nextSibling は、次の隣接する兄弟ノードを取得します。 🎜>node .previousSibling 隣接する前の兄弟ノードを取得します

2.4 親ノード node.parentNode を取得します。