JavaScript の DOM 要素の完全な概要

JavaScript dom を勉強しているとよく問題に遭遇するので、この記事でそれらについて説明します。

DOM で最も一般的に使用される要素は、ドキュメント オブジェクトに加えて、HTML 要素を表す Element オブジェクトです。

Element オブジェクトは、要素ノード、テキスト ノード、およびコメント ノード タイプの子ノードを持つことができます。DOM には、要素を追加、削除、変更、確認するための一連のメソッドが用意されています。

Element には、いくつかの重要な属性

: 要素タグがあります。 name、類似のタグがありますName
nodeType: 要素の種類
className: クラス名 id: 要素 idchildren: 子要素のリスト (HTMLCollection)
childNodes: 子要素のリスト (NodeList)
firstChild: 最初の子要素 ​​
lastChild: 最後の子要素
nextSibling: 次の兄弟要素
previousSibling: 前の兄弟要素
parentNode、parentElement: 親要素

Query 要素

getElementById
メソッドは、指定された ID 属性に一致する要素ノードを返します。一致するノードが見つからない場合は、null が返されます。これは要素を取得する最速の方法でもあります

var elem = document.getElementById("test");getElementsByClassName()
getElementsByClassName

このメソッドは、クラス名が指定された条件を満たすすべての要素 (検索範囲にはそれ自体が含まれます) と、要素はリアルタイムで戻り値に反映されます。結果は進行中です。このメソッドは、ドキュメント オブジェクトだけでなく、任意の要素ノードでも呼び出すことができます。

var elements = document.getElementsByClassName(names);//getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。

document.getElementsByClassName('red test');```
* getElementsByTagName()

getElementsByTagName メソッドは、指定されたタグを持つすべての要素を返します (検索範囲にはそれ自体が含まれます)。戻り値は HTMLCollection オブジェクトです。つまり、検索結果は動的コレクションであり、要素の変更は返されたコレクションにリアルタイムで反映されます。このメソッドは、ドキュメント オブジェクトだけでなく、任意の要素ノードでも呼び出すことができます。

var paras = document.getElementsByTagName("p");
//上面代码返回当前文档的所有p元素节点。注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。```

getElementsByName()
getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

// フォームがあると仮定します:

var Forms = document.getElementsByName("x");
forms[0].tagName // "FORM " //IE ブラウザでこのメソッドを使用すると、name 属性を持たないが同じ名前の id 属性を持つ要素も返されるため、name 属性と id 属性を異なる値に設定することをお勧めします。 ```* querySelector()
querySelector メソッドは、指定された CSS セレクターに一致する要素ノードを返します。複数のノードが一致基準を満たす場合、最初に一致したノードが返されます。一致するノードが見つからない場合は、null が返されます。

要素の作成

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
//querySelector方法无法选中CSS伪元素。```

querySelectorAll()
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

elementList = document.querySelectorAll(selectors);//querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。var matches = document.querySelectorAll("div.note, div.alert");//上面代码返回class属性是note或alert的div元素。

rree

elementFromPoint()
elementFromPoint方法返回位于页面指定位置的元素。

DocumentFragment オブジェクトは、メモリ内に存在する DOM フラグメントですが、現在のドキュメントには属しません。多くの場合、より複雑な DOM 構造を生成し、それらを現在のドキュメントに挿入するために使用されます。この利点は、DocumentFragment が現在のドキュメントに属していないため、DocumentFragment を変更しても Web ページが再レンダリングされず、現在のドキュメントの DOM を直接変更するよりもパフォーマンスが向上することです。

##要素を変更する

* appendChild()
要素の最後に要素を追加する

var element = document.elementFromPoint(x, y);//上面代码中，elementFromPoint方法的参数x和y，分别是相对于当前窗口左上角的横坐标和纵坐标，单位是CSS像素。

要素の前に要素を挿入する

elementFromPoint方法返回位于这个位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回null。

挿入される要素と挿入される要素の2つのパラメータを受け入れますreplace

createElement()
createElement方法用来生成HTML元素节点。

要素の削除

var newDiv = document.createElement("div");//createElement方法的参数为元素的标签名，即元素节点的tagName属性。//如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

Clone 要素。 true が渡されると、要素とそのサブ要素がコピーされます (IE もコピーされます)。 false の場合、要素自体のみがコピーされます

createTextNode()
createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。

var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello");//上面代码新建一个div节点和一个文本节点
createDocumentFragment()

setAttribute()

//createDocumentFragment方法生成一个DocumentFragment对象。var docFragment = document.createDocumentFragment();```

var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello");newDiv.appendChild(newContent);```
insertBefore()

もちろん、上記のメソッドが行うことは、クラス操作の配列属性 element.attributes によっても実現できます

## ##HTMLCollection と NodeList Element オブジェクトが要素を表すことがわかっているため、複数の要素 Collection には通常、2 つのデータ型があります。 HTMLCollection オブジェクトは、HTML 要素のコレクションを表すインターフェイスです。およびリストを横断できる属性

次のメソッドは HTMLCollection オブジェクトを取得します

var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello");newDiv.insertBefore(newContent, newDiv.firstChild);replaceChild()
replaceChild()

次のメソッドは NodeList オブジェクトを取得します

newDiv.replaceChild(newElement, oldElement);```
* removeChild()

* これらはすべて読み取り専用です

* これらはすべてリアルタイムです、つまり、ドキュメントへの変更は関連オブジェクトに即座に反映されます (1 つの例外を除いて、 document.querySelectorAll によって返される NodeList はリアルタイムではありません)

* すべてに item() メソッドがあり、 item(index) またはを通じて要素を取得できます。 item("id") #####違いは、* HTMLCollection オブジェクトには、id または name 要素を渡すことで取得できるnamedItem() メソッドがあることです

* HTMLCollection の item() メソッドと、属性を通じて要素を取得する(document.forms.f1) は ID と名前をサポートできますが、NodeList オブジェクトは ID のみをサポートします

この記事には dom についての関連説明があり、より関連した内容については php 中国語 Web サイトに注意してください。

以上がJavaScript の DOM 要素の完全な概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。