了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)

了解 NodeList、HTMLCollection 以及 NamedNodeMap 的使用

在前端开发中，我们经常需要对 DOM 进行操作。在这个过程中，我们可能会接触到 NodeList、HTMLCollection 以及 NamedNodeMap 这些对象。本文将介绍这三个对象的使用。

1. NodeList

NodeList 是一个节点集合，表示一组有序的节点列表。这个列表通常是通过调用 DOM 的方法生成的，比如 `document.querySelectorAll()` 方法。

NodeList 类似于数组，它可以通过索引来访问其中的每个节点。但和数组不同的是，它不支持像 `push()`、`pop()`、`splice()` 这样的数组方法。同时，它也不是一个真正的数组对象，不能使用数组的 `forEach()` 方法。

下面是一个使用 NodeList 的简单例子：

let nodeList = document.querySelectorAll('div');
for (let i = 0; i < nodeList.length; i++) {
  console.log(nodeList[i]);
}

在上面的代码中，我们通过 `document.querySelectorAll('div')` 方法获取了一个包含所有 `<div>` 元素的 NodeList，然后使用循环遍历每一个节点。

2. HTMLCollection

HTMLCollection 类似于 NodeList，它也是一个有序的节点集合。不同的是，HTMLCollection 只包含属于同一文档的元素。

HTMLCollection 是通过 DOM 树的自然次序来排序的，所以它的顺序是元素出现在文档流中的顺序。和 NodeList 一样，HTMLCollection 也可以通过索引来访问其中的元素。

HTMLCollection 并没有提供类似于 `document.querySelectorAll()` 这样的查询方法，但可以通过获取文档中特定的元素来获得 HTMLCollection。

下面是一个使用 HTMLCollection 的简单例子：

let collection = document.forms[0].elements;
for (let i = 0; i < collection.length; i++) {
  console.log(collection[i]);
}

在上面的代码中，我们通过 `document.forms[0].elements` 获取了表单中所有的元素，并进行遍历。

3. NamedNodeMap

NamedNodeMap 是一个名字和值的节点集合。这个集合通常是由元素的属性集合（AttributeCollection）构建而成的。

NamedNodeMap 类似于一个普通的 JavaScript 对象，可以像对象一样使用点语法访问其中的属性，也可以通过数组索引来访问其中的元素。

下面是一个使用 NamedNodeMap 的简单例子：

let map = document.getElementById('myDiv').attributes;
let len = map.length;
for (let i = 0; i < len; i++) {
  console.log(map[i].name + ": " + map[i].value);
}

在上面的代码中，我们通过 `document.getElementById('myDiv').attributes` 获取了 `id` 属性的 NamedNodeMap，然后遍历其中每个元素，打印它们的名称和值。

总结

NodeList、HTMLCollection 和 NamedNodeMap 都是 DOM 操作中使用的节点集合对象。虽然它们有很多相似之处，但是它们都有自己的特点和用途。在实际开发中，我们需要根据具体的情况来选择使用哪种集合对象。

本文介绍了 NodeList、HTMLCollection 和 NamedNodeMap 的使用方法，希望对大家有所帮助。