理解NodeList、HTMLCollection以及NamedNodeMap的运用(代码)-百分百源码网

理解NodeList、HTMLCollection以及NamedNodeMap的运用(代码)

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于理解NodeList、HTMLCollection乃至NamedNodeMap的使用(代码)，有必然的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。

这三个都是类数组对象。

HTMLCollection只包括元素节点，而NodeList包括任何节点类型。
HTMLCollection对象可以调取item()和namedItem()办法，NodeList对象只能调取item()办法。在猎取元素时，两者都可以通过方括号的语法或item()办法。HTMLCollection对象同意通过namedItem()办法，传入一个name或id猎取元素。
一些旧版本阅读器中的办法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。所有阅读器的 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('a1'))
	console.log(res.namedItem('a2'))
	// 结果如下图所示：
</script>