NodeList、HTMLCollection、NamedNodeMap の使用法を理解する (コード)-htmlチュートリアル-php.cn

NodeList、HTMLCollection、NamedNodeMap の使用法を理解する (コード)

云罗郡主

リリース： 2018-10-17 14:53:48

転載

2087 人が閲覧しました

この記事の内容は、NodeList、HTMLCollection、NamedNodeMap の使用法 (コード) を理解することに関するものです。必要な方は参考にしていただければ幸いです。

#これら 3 つは配列のようなオブジェクトです。

HTMLCollection には要素ノードのみが含まれますが、NodeList には任意のノードタイプが含まれます。
HTMLCollection オブジェクトは item() メソッドとnamedItem() メソッドを呼び出すことができますが、NodeList オブジェクトは item() メソッドのみを呼び出すことができます。要素を取得するときは、どちらも角かっこ構文または item() メソッドを通じて実行できます。 HTMLCollection オブジェクトを使用すると、namedItem() メソッドを通じて名前または ID を渡すことによって要素を取得できます。
一部の古いブラウザのメソッド (getElementsByClassName() など) は、HTMLCollection オブジェクトの代わりに NodeList オブジェクトを返します。すべてのブラウザの childNodes プロパティは NodeList オブジェクトを返します。ほとんどのブラウザの querySelectorAll() は NodeList オブジェクトを返します。 getElementsByTagName() は HTMLCollection オブジェクトを返します。
NamedNodeMap オブジェクトは、node.attributes 属性を通じて取得され、要素のすべての属性で構成される疑似配列オブジェクトが取得されます。

例:

<body>
<p>
  <a href="#" id="a1">1</a>
  <a href="a.html" name="a2">2</a>
</p>
</body>
<script>
	// 获取一个HTMLCollection对象
	var res = document.getElementsByTagName("a");
	console.log(res);
	console.log(res.item(0))
	console.log(res[0])
	console.log(res.namedItem(&#39;a1&#39;))
	console.log(res.namedItem(&#39;a2&#39;))
	// 结果如下图所示：
</script>

ログイン後にコピー

NodeList、HTMLCollection、NamedNodeMap の使用法を理解する (コード)