DOM 节点列表学习笔记

DOM（Document Object Model）即文档对象模型，它是用来描述 HTML 页面及 XML 文档的编程接口。而 DOM 节点列表则是访问和操作 HTML 页面及 XML 文档中各种元素的方式。DOM 节点列表提供了多种方法和属性，以便开发人员能够使用 JavaScript 代码对 HTML 元素进行访问、增删改查等操作。

常用节点列表及其方法

1. NodeList

NodeList 是一个类数组对象，它包含一组有序的节点，这些节点可以通过节点的索引值访问。在 NodeList 中的节点通常是某些操作的结果，例如根据某个选择器或者按照特定顺序获取的一组节点。

常用方法：

• item(index)：返回指定索引位置的节点。
• length：返回 NodeList 中节点的个数。

示例：

javascriptCopy Code
const nodes = document.querySelectorAll('.class');
for (let i = 0; i < nodes.length; i++) {
  const item = nodes.item(i);
  console.log(item);
}

2. HTMLCollection

HTMLCollection 是一个类数组对象，它包含了在文档中按照文档流顺序出现的所有元素（element）。HTMLCollection 在某些情况下会自动更新，例如在文档中插入新元素时，该元素会自动添加到 HTMLCollection 中。

常用方法：

• item(index)：返回指定索引位置的元素。
• namedItem(name)：返回具有指定名称或 id 属性的元素。

示例：

javascriptCopy Code
const collection = document.forms;
for (let i = 0; i < collection.length; i++) {
  const item = collection.item(i);
  console.log(item);
}

3. NamedNodeMap

NamedNodeMap 是一个类数组对象，它包含了一组按照名称或索引值访问的节点。这些节点通常是某个元素的属性节点、或被用作 ID 的属性、或在文档中某个方面有特殊的意义和功能。

常用方法：

• getNamedItem(name)：返回具有指定名称的节点。
• item(index)：返回指定索引位置的节点。

示例：

javascriptCopy Code
const map = document.getElementById('id').attributes;
for (let i = 0; i < map.length; i++) {
  const item = map.item(i);
  console.log(item);
}

总结

DOM 节点列表提供了多种方法和属性，可以方便地访问和操作 HTML 页面及 XML 文档中的各种元素。本文介绍了常用的 NodeList、HTMLCollection 和 NamedNodeMap 三种节点列表及其常用方法，希望对你有所帮助！