在使用 XML DOM 操作 XML 数据时,经常会处理一组节点,比如获取所有 <book> 元素,或者遍历某个父节点下的所有子节点。这时就会用到 节点列表(NodeList)。它是 DOM 提供的一种特殊集合对象,用于访问多个节点。


目录

  1. 什么是 NodeList
  2. NodeList 的常见来源
  3. NodeList 的特性
  4. 遍历 NodeList 的方法
  5. 示例代码
  6. 注意事项
  7. 参考资料与出站链接

1. 什么是 NodeList?

NodeList 是一种“类数组对象”,表示一组节点集合。它不是标准数组,但可以通过索引访问元素,并拥有 .length 属性。

典型用途:

  • 获取所有指定标签的元素(如:getElementsByTagName()
  • 获取某个节点的所有子节点(如:childNodes

2. NodeList 的常见来源

方法描述
element.childNodes获取一个元素下的所有子节点(包括文本、注释等)
document.getElementsByTagName获取所有指定标签名的元素
document.querySelectorAll返回匹配 CSS 选择器的所有元素(返回静态 NodeList)

3. NodeList 的特性

属性/方法描述
.length返回集合中节点的数量
[index]可使用索引访问每一个节点
for...of支持现代浏览器中使用 for...of 进行遍历
非数组对象不能直接使用数组方法(如 map()filter()

4. 遍历 NodeList 的方法

使用 for 循环:

var books = xmlDoc.getElementsByTagName("book");
for (var i = 0; i < books.length; i++) {
  console.log(books[i].nodeName);
}

使用 for...of(支持现代浏览器):

for (let node of books) {
  console.log(node.nodeName);
}

转为数组再操作:

Array.from(books).forEach(function(book) {
  console.log(book.nodeName);
});


5. 示例代码

示例 XML:

<library>
  <book>
    <title>XML Basics</title>
  </book>
  <book>
    <title>Advanced XML</title>
  </book>
</library>

JavaScript 操作:

var xmlDoc = parser.parseFromString(xmlString, "text/xml");
var bookList = xmlDoc.getElementsByTagName("book");

for (var i = 0; i < bookList.length; i++) {
  var title = bookList[i].getElementsByTagName("title")[0].textContent;
  console.log("书名:" + title);
}


6. 注意事项

  • childNodes 会返回所有类型的子节点(包括文本节点、注释等),注意用 nodeType 判断类型。
  • NodeList 是只读的;不能通过它修改 DOM。
  • querySelectorAll 返回的是静态 NodeList,DOM 变化不会影响其内容。
  • 老版本浏览器中不支持 forEach 或 for...of,需使用传统 for 循环。

7. 参考资料与出站链接


掌握 NodeList 是处理 XML 文档结构的基础技能,它帮助你高效读取并操作多个节点,从而构建强大的 XML 数据处理逻辑。