掌握XML DOM：从基础到实践（一）

admin
JavaScript
2天前
5热度
0评论

XML DOM（文档对象模型）是访问和操作XML文档的标准方法。本文将详细介绍XML DOM的基本概念、节点类型、常用属性和方法，并通过实际示例帮助你更好地理解和应用XML DOM。

前言

在开始学习XML DOM之前，建议你具备以下基础知识：

HTML：了解HTML的基本结构和语法。
XML：熟悉XML的基本概念和语法。
JavaScript：掌握JavaScript的基本编程技巧。

如果你对这些知识还不太熟悉，建议先阅读相关教程再回来学习XML DOM。

什么是DOM？

DOM（Document Object Model，文档对象模型）是由W3C（World Wide Web Consortium）制定的标准。它定义了一种平台和语言中立的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。

DOM分为三个主要部分：

核心DOM：适用于任何结构化文档的标准模型。
XML DOM：专为XML文档设计的标准模型。
HTML DOM：专为HTML文档设计的标准模型。

什么是XML DOM？

XML DOM是XML文档的标准对象模型和编程接口。它将XML文档视为一棵节点树，其中每个成分都是一个节点。通过XML DOM，你可以轻松地获取、更改、添加或删除XML元素。

节点类型

在XML DOM中，XML文档的每个成分都是一个节点。具体来说：

文档节点：整个XML文档。
元素节点：每个XML元素。
文本节点：包含在XML元素中的文本。
属性节点：XML元素的属性。
注释节点：XML文档中的注释。

节点关系

节点之间存在层级关系，包括：

父节点：拥有子节点的节点。
子节点：被包含在父节点中的节点。
同级节点：具有相同父节点的节点。

示例：XML文档结构

让我们通过一个简单的XML文件来理解节点树的概念。假设我们有以下XML文件 books.xml：

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
    <book category="cooking">
        <title lang="en">Everyday Italian</title>

<author>Giada De Laurentiis</author>

<year>2005</year>

<price>30.00</price>
    </book>
    <book category="children">
        <title lang="en">Harry Potter</title>

<author>J K. Rowling</author>

<year>2005</year>

<price>29.99</price>
    </book>
    <book category="web">
        <title lang="en">XQuery Kick Start</title>

<author>James McGovern</author>

<author>Per Bothner</author>

<author>Kurt Cagle</author>

<author>James Linn</author>

<author>Vaidyanathan Nagarajan</author>

<year>2003</year>

<price>49.99</price>
    </book>
    <book category="web" cover="paperback">
        <title lang="en">Learning XML</title>

<author>Erik T. Ray</author>

<year>2003</year>

<price>39.95</price>
    </book>
</bookstore>

在这个例子中，<bookstore> 是根节点，它包含了四个 <book> 子节点。每个 <book> 节点又包含了多个子节点，如 <title>、<author>、<year> 和 <price>。

文本节点

在DOM中，元素节点的文本内容是存储在文本节点中的。例如，<year>2005</year> 中的 2005 是一个文本节点，而不是 <year> 元素的直接值。

加载和解析XML文档

要使用XML DOM，首先需要将XML文档加载到内存中。这通常通过JavaScript的XMLHttpRequest对象或DOMParser对象来实现。

使用XMLHttpRequest加载XML文档

以下是一个使用XMLHttpRequest加载XML文档的示例：

function loadXMLDoc(dname) {
    if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器
        xhttp = new XMLHttpRequest();
    } else {
        // IE6, IE5 浏览器
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET", dname, false);
    xhttp.send();
    return xhttp.responseXML;
}

// 调用函数加载XML文档
var xmlDoc = loadXMLDoc("books.xml");

使用DOMParser解析XML字符串

如果XML内容是以字符串形式存在的，可以使用DOMParser对象来解析它：

function loadXMLString(txt) {
    if (window.DOMParser) {
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(txt, "text/xml");
    } else {
        // Internet Explorer

        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = false;
        xmlDoc.loadXML(txt);
    }
    return xmlDoc;
}

// 调用函数解析XML字符串
var text = `

<bookstore>
    <book category="cooking">
        <title lang="en">Everyday Italian</title>

<author>Giada De Laurentiis</author>

<year>2005</year>

<price>30.00</price>
    </book>
</bookstore>
`;
var xmlDoc = loadXMLString(text);

操作XML DOM

一旦XML文档被加载到内存中，就可以使用DOM提供的属性和方法来访问和操作节点。

常用属性

nodeName：节点的名称。
nodeValue：节点的值。
parentNode：节点的父节点。
childNodes：节点的子节点列表。
attributes：节点的属性列表。

常用方法

getElementsByTagName(name)：获取所有指定标签名称的元素。
appendChild(node)：向节点添加子节点。
removeChild(node)：从节点中删除子节点。

示例：获取节点值

以下示例展示了如何从 books.xml 中获取第一个 <title> 元素的文本值：

var titleNode = xmlDoc.getElementsByTagName("title")[0];
var titleText = titleNode.childNodes[0].nodeValue;
console.log(titleText); // 输出: Everyday Italian

解释

xmlDoc：由解析器创建的XML DOM对象。
getElementsByTagName("title")[0]：获取第一个 <title> 元素。
childNodes[0]：获取 <title> 元素的第一个子节点（文本节点）。
nodeValue：获取节点的值（文本内容）。

总结

通过本文，你已经了解了XML DOM的基本概念、节点类型、常用属性和方法，并学会了如何加载和解析XML文档。XML DOM是一个强大的工具，可以帮助你高效地操作XML数据。希望这些知识能为你在实际开发中带来帮助。

如果你有任何疑问或需要进一步的帮助，请随时留言。祝你学习愉快！