JavaScriptでのDOM操作を詳しく解説

1. DOM とは

JavaScript は、ECMAScript、DOM、BOM の 3 つの部分で構成されており、Web ページのコンテンツを記述するためのメソッドとインターフェイス、つまりドキュメント オブジェクト モデルを表します。 Web ページでは、ページ (またはドキュメント) を構成するオブジェクトがツリー構造で構成されます。ドキュメント内のオブジェクトを表すために使用される標準モデルは DOM と呼ばれ、そのツリー構造は私たちがよく DOM ツリーと呼ぶものです。

Wikipedia での DOM の紹介は、より正確です: DOM は、クロスプラットフォームで言語に依存しないアプリケーション プログラミング インターフェイスです。つまり、現在の HTML、XHTML、または XML ドキュメントをツリー構造として処理します。各ノードはオブジェクトであり、それぞれノードはドキュメントの一部を表します。

2. DOM ノード

1. ノードのタイプ

DOM ツリーはさまざまなタイプのノードで構成されており、これらのノード タイプには、nodeType 値を渡すことができます。取得または必要なものが、対応するタイプのノードであるかどうかを判断します。

ノードタイプ	要素ノード(ラベルノード)	属性ノード	テキストノード(スペース、改行、テキスト)	コメントノード	ドキュメントノード
nodeType値	1	2	3	8	9

nodeType 値を通じてタイプを判断することに加えて、nodeName を通じて要素ノードと属性ノードのノード名を表示したり、nadeValue を使用して属性ノードの属性値を表示したりすることもできます。

2. 要素ノードを取得する

document.getElementById(id);
document.getElementByTagName(tagname);
document.getElementByClassName(classname);

通常、JavaScript で HML の要素ノードを変更または使用したい場合は、それを呼び出す前にまず取得する必要があります。要素のId​​属性やClass属性を設定するか、タグ名を使用して取得します。ただし、getElementById() メソッドは XML では機能しないことに注意してください。XML ドキュメントでは、id 属性を使用して検索を実行する必要があり、この型は XML DTD で宣言する必要があります。

必要なノードを取得した後、ノードの関係を通じて他のノードを操作することもできます。ここでは、例として初期要素ノードとして p 要素を取り上げます。

2.1 子ノード

p.children();
p.childNodes();

p配下の子ノードを取得し、p.children()は要素ノードの子ノードのみを取得できますが、p.childNodes()はすべてのタイプの子ノードを取得します。これは、空白のテキスト ノードが解析されることを意味します。

2.2 親ノード

p.parentNode();
p.offsetParent();

pの親ノードを取得、p.offsetParent()で位置属性付きの祖先ノードを取得、つまり、親ノードから開始します検索 親ノードに位置属性がない場合は、位置属性を持つノードが見つかるまで、親ノードの親ノードを検索します。

2.3 兄弟ノード

//下一个兄弟节点 p.nextElementSibling();
p.nextSibling();//上一个兄弟节点 p.previousElementSibling();
p.previousSibling();

子ノードを取得するのと同じように、ここに要素があるかどうかが重要です。と p .previousSibling () は空白ノードを解析するときに、p の下のスペースまたは復帰を取得します。違いは上記と同じです。

3. ノードの操作

HTMLで変更したノードの追加や削除に加えて、JavaScriptでノードを操作することもできます。

3.1 ノードの作成

//获取p的第一个子节点p.firstElementChild();
p.firstChild();//获取p的最后一个子节点p.lastElementChild();
p.lastElementChild();

テキストノードの作成は、通常、静的テキストを作成するために使用され、innerHTML形式のようなHTMLを含めることはできません。 creatTextNode() はより安全ですが、innerText にはブラウザの互換性の問題があります。

3.2 ノードの追加

作成したノードはHTMLに自動的に追加されず、作成したノードを操作する必要があります。

//创建节点/创建文本节点createElement();
createTextNode()；

insertBefore()の第二引数は省略可能な引数であり、第二引数を書かないとデフォルトで末尾に追加され、appendChild();

3.3と同等です。 Replacement

//向尾部添加子节点 appendChild(); 
//向目标节点之前添加insertBefore(newElement,targetElement);

p.replaceChild(newElement,oldElement) は、新しいノードであっても古いノードであっても、p の子ノードである必要があります。

3.4 削除

//将旧节点换为新节点replaceChild(newElement,oldElement);

子ノードが削除されることに注意してください。

3.5 Clone/Copy

removeChild();

パラメータのブール値が true の場合、それはディープコピーです。つまり、ノード自体とその下のすべての子ノードがコピーされます。 パラメータのブール値がfalseの場合は浅いコピーとなり、ノード自体のみがコピーされます。

3.6

//深复制或浅复制cloneNode(boolean);

の判定 子ノードがあるかどうかを判定し、ブール値を返します。

3.7 プロパティ

//获取节点属性getAttribute();//设置节点属性setAttribute();//删除节点属性removeAttribute();

 　要注意的一点就是class属性不能通过setAttribute(); 设置。

三、DOM的优缺点

　　DOM的优点主要表现在：易用性强，并且遍历简单，支持XPath，增强了易用性。

　　DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高。

以上がJavaScriptでのDOM操作を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。