在使用 XML DOM 操作 XML 数据时,经常会处理一组节点,比如获取所有 <book>
元素,或者遍历某个父节点下的所有子节点。这时就会用到 节点列表(NodeList)。它是 DOM 提供的一种特殊集合对象,用于访问多个节点。
目录
- 什么是 NodeList
- NodeList 的常见来源
- NodeList 的特性
- 遍历 NodeList 的方法
- 示例代码
- 注意事项
- 参考资料与出站链接
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. 参考资料与出站链接
- MDN – NodeList
- W3C DOM Level 2 Core
- 更多 XML 教程内容可访问:www.52kanjuqing.com
掌握 NodeList 是处理 XML 文档结构的基础技能,它帮助你高效读取并操作多个节点,从而构建强大的 XML 数据处理逻辑。
发表回复