掌握XML DOM节点列表与属性（二）

admin
JavaScript
2天前
7热度
0评论

在处理XML文档时，DOM（Document Object Model）提供了强大的工具来操作和查询数据。本文将详细介绍如何使用DOM方法和属性来获取节点列表、遍历节点树以及处理属性。通过这些技术，你可以轻松地解析和操作复杂的XML文档。

概述

XML DOM是一种用于访问和操作XML文档的标准编程接口。通过DOM，我们可以将XML文档视为一个树形结构，其中每个节点代表文档的一部分。本文将重点介绍以下几个方面：

节点列表：如何使用getElementsByTagName()和childNodes属性获取节点列表。
节点列表长度：如何使用length属性遍历节点列表。
属性列表：如何使用attributes属性获取元素的属性列表。
遍历节点树：如何遍历XML文档的节点树。
浏览器差异：如何处理不同浏览器在DOM解析上的差异。

节点列表

获取节点列表

在XML DOM中，节点列表是由getElementsByTagName()方法和childNodes属性返回的对象。这些方法和属性返回的节点列表对象包含了按文档顺序排列的节点集合。

实例：获取第一个 <title> 元素的文本

假设我们有一个名为books.xml的XML文件，我们可以通过以下代码获取第一个<title>元素的文本：

// 加载XML文件
var xmlDoc = loadXMLDoc("books.xml");

// 获取所有 
<title> 元素的节点列表
var titles = xmlDoc.getElementsByTagName("title");

// 获取第一个 
<title> 元素的文本
var firstTitleText = titles[0].childNodes[0].nodeValue;

console.log(firstTitleText); // 输出: "Everyday Italian"

节点列表长度

节点列表对象具有一个length属性，表示列表中节点的数量。这个属性非常有用，特别是在需要遍历整个节点列表时。

实例：遍历所有 <title> 元素

// 加载XML文件
var xmlDoc = loadXMLDoc("books.xml");

// 获取所有 
<title> 元素的节点列表
var titles = xmlDoc.getElementsByTagName("title");

// 遍历所有 
<title> 元素并输出文本
for (var i = 0; i < titles.length; i++) {
    console.log(titles[i].childNodes[0].nodeValue);
}

输出：

Everyday Italian
Harry Potter
XQuery Kick Start
Learning XML

属性列表

获取属性列表

元素节点的attributes属性返回一个命名节点图（Named Node Map），其中包含了该元素的所有属性。命名节点图类似于节点列表，但它提供了更多的方法来操作属性。

实例：获取第一个 <book> 元素的 category 属性

// 加载XML文件
var xmlDoc = loadXMLDoc("books.xml");

// 获取第一个 
<book> 元素的属性列表
var bookAttributes = xmlDoc.getElementsByTagName("book")[0].attributes;

// 获取 category 属性的值
var category = bookAttributes.getNamedItem("category").nodeValue;

console.log(category); // 输出: "cooking"

属性列表长度

属性列表也具有length属性，表示属性的数量。

实例：输出属性数量

// 加载XML文件
var xmlDoc = loadXMLDoc("books.xml");

// 获取第一个 
<book> 元素的属性列表
var bookAttributes = xmlDoc.getElementsByTagName("book")[0].attributes;

// 输出属性数量
console.log(bookAttributes.length); // 输出: 1

遍历节点树

遍历子节点

遍历节点树意味着在节点树中进行循环或移动。这在需要提取每个元素的值时非常有用。

实例：遍历 <book> 的所有子节点

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p><script>
var txt = "";
var text = "
<book><title>Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year></book>";
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(text, "text/xml");

// 获取根元素的子节点
var children = xmlDoc.documentElement.childNodes;

// 遍历所有子节点并输出名称和值
for (var i = 0; i < children.length; i++) {
    if (children[i].nodeType === 1) { // 确保是元素节点
        txt += children[i].nodeName + ": " + children[i].childNodes[0].nodeValue + "<br>";
    }
}

document.getElementById("demo").innerHTML = txt;
</script>
</body>
</html>

输出：

title: Everyday Italian
author: Giada De Laurentiis
year: 2005

DOM解析中的浏览器差异

虽然所有现代浏览器都支持W3C DOM规范，但在处理空白和换行时存在差异。例如，某些浏览器会将空白和换行作为文本节点处理，而其他浏览器则不会。

处理空白和换行

实例：获取根元素的子节点数量


// 加载XML文件
var xmlDoc = loadXMLDoc("books.xml");

// 获取根元素的子节点
var children = xmlDoc.documentElement.childNodes;

// 输出子节点数量
console.log("Number of child nodes: " + children.length);

在不同的浏览器中，输出可能会有所不同。例如，Internet Explorer可能会输出4，而其他浏览器可能会输出9。

避免空的文本节点

为了避免导航到空的文本节点，可以使用一个函数来检查节点类型。

实例：获取第一个子元素

<!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script><script>
// 检测第一个节点是否为元素节点
function get_firstChild(n) {
    var y = n.firstChild;
    while (y.nodeType !== 1) {
        y = y.nextSibling;
    }
    return y;
}
</script>
</head>
<body><script>
// 加载XML文件
var xmlDoc = loadXMLDoc("books.xml");

// 获取第一个 
<book> 元素的第一个子节点
var firstChild = get_firstChild(xmlDoc.getElementsByTagName("book")[0]);

// 输出第一个子节点的名称
console.log(firstChild.nodeName); // 输出: "title"
</script>
</body>
</html>

总结

通过本文，我们详细介绍了如何使用XML DOM来获取节点列表、遍历节点树以及处理属性。了解这些基本操作对于高效地解析和操作XML文档至关重要。希望本文的内容能帮助你在实际开发中更好地利用XML DOM的强大功能。