在 XML DOM（文档对象模型）中，整个 XML 文档被表示为一个 树形结构，称为 DOM 树。这棵树的每个节点都代表 XML 文档中的某个部分，如元素、属性、文本或注释等。每个节点通过父子关系、兄弟关系等连接在一起，形成一个树状结构。
DOM 树的结构
- 根节点（Root Node）：DOM 树的顶部节点，通常是整个 XML 文档本身。
- 元素节点（Element Node）：XML 中的元素标签，如
<book>、<title>、<author>。 - 文本节点（Text Node）：元素中的文本内容，如 “Learning XML”。
- 属性节点（Attribute Node）：元素的属性，如
lang="en"。 - 子节点（Child Nodes）：某个节点下的直接下属节点，如某个元素的子元素或文本内容。
- 父节点（Parent Node）：某个节点的上级节点，通常是它的父元素节点。
- 兄弟节点（Sibling Nodes）：同一个父节点下的其他节点。
DOM 树示意图
假设我们有以下的 XML 文档：
<bookstore>
<book lang="en">
<title>Learning XML</title>
<author>John Doe</author>
<price>29.99</price>
</book>
<book lang="es">
<title>Aprendiendo XML</title>
<author>Jane Smith</author>
<price>34.99</price>
</book>
</bookstore>
对于这个 XML 文档，其对应的 DOM 树结构如下：
(Document)
|
(bookstore)
/ \
(book) (book)
| |
(title) (title)
| |
(text) (text)
(Learning (Aprendiendo)
XML) XML
树的各个节点说明
- 根节点：
根节点是文档节点，它代表整个 XML 文档，通常是Document节点。在 DOM 中，根节点可以通过document.documentElement获取，通常对应 XML 文档中的根元素（如<bookstore>）。 - 元素节点：
每个 XML 元素，如<book>、<title>、<author>，都是一个元素节点。每个元素节点都可以有属性节点（如lang="en"）以及子元素节点。元素节点是 DOM 树的主要组成部分。 - 文本节点：
例如，<title>元素内的文本 “Learning XML” 就是一个文本节点。在 DOM 中，文本节点总是属于某个元素节点的子节点。通过 DOM 操作，可以访问和修改这些文本内容。 - 属性节点：
XML 元素可以有属性，如<book lang="en">中的lang="en"。这些属性节点存储在元素节点中。属性节点不出现在 DOM 树的显式结构中，但可以通过元素节点的属性方法访问。 - 子节点和兄弟节点：
在 DOM 树中，每个节点可以有一个或多个子节点。节点间通过父子关系和兄弟关系相连。例如，<book>节点有多个子节点，包括<title>、<author>和<price>。
DOM 树操作
通过 XML DOM API，开发人员可以对 DOM 树进行以下操作：
- 遍历节点：可以通过父节点、子节点、兄弟节点的关系，遍历树中的节点。
parentNode：获取父节点。childNodes：获取所有子节点。firstChild、lastChild：获取第一个和最后一个子节点。nextSibling、previousSibling：获取当前节点的下一个和上一个兄弟节点。
- 获取节点：通过 ID、标签名、类名等方法，获取文档中的特定节点。
getElementById()：根据 ID 获取元素。getElementsByTagName()：根据标签名称获取所有匹配的元素。getElementsByClassName()：根据类名获取元素。
- 修改节点内容：可以改变元素的文本内容、属性值等。
textContent或nodeValue：获取或设置文本节点的内容。setAttribute()：设置元素的属性值。
- 添加/删除节点：可以向 DOM 树中添加或删除节点。
appendChild()：向父节点添加子节点。removeChild()：删除指定的子节点。
示例代码：访问和操作 DOM 树
// 获取根元素 <bookstore>
var bookstore = document.documentElement;
// 获取所有 <book> 元素
var books = bookstore.getElementsByTagName("book");
// 遍历每本书并修改书名
for (var i = 0; i < books.length; i++) {
var title = books[i].getElementsByTagName("title")[0];
title.textContent = "Updated Title " + (i + 1); // 更新书名
}
// 获取第一个 <book> 元素
var firstBook = books[0];
// 获取并修改第一个 <book> 的属性
firstBook.setAttribute("lang", "fr"); // 修改语言为法语
参考资料与外部链接
总结
XML DOM 树是以树状结构表示 XML 文档的核心。每个节点代表 XML 文档中的一个部分，开发人员可以通过遍历、修改和操作这些节点来动态地处理 XML 数据。理解 DOM 树的结构和节点操作是高效操作 XML 数据的基础。
发表回复