DOM(Document Object Model)是一种用于处理XML和HTML文档的编程接口,它提供了对文档的结构化表示和操作。通过DOM,可以使用编程语言(如JavaScript)访问和修改文档的内容、结构和样式。以下是一个简要的XML DOM教程:

1. DOM 的基本概念:

  •  文档对象模型(DOM): DOM 是一种文档表示形式,将文档解析为一个由节点组成的树状结构,每个节点代表文档的一部分。

  
  •  节点(Node): DOM 树的基本单元是节点,可以是元素、属性、文本等。


2. 获取 DOM 对象:

在使用DOM之前,需要获取文档的DOM对象。

使用 JavaScript 获取 DOM 对象:
// 获取整个文档对象
var xmlDoc = document;

// 获取元素节点
var elementNode = document.getElementById("elementId");

// 获取元素集合
var elements = document.getElementsByTagName("tagname");

3. DOM 节点操作:

获取和修改节点内容:
// 获取节点文本内容
var textContent = elementNode.textContent;

// 修改节点文本内容
elementNode.textContent = "新的文本内容";

获取和修改属性:
// 获取属性值
var attributeValue = elementNode.getAttribute("attributeName");

// 修改属性值
elementNode.setAttribute("attributeName", "新的属性值");

4. 遍历 DOM 树:

遍历子节点:
// 遍历子节点
for (var i = 0; i < elementNode.childNodes.length; i++) {
    var childNode = elementNode.childNodes[i];
    // 处理子节点
}

遍历父节点和兄弟节点:
// 获取父节点
var parentNode = elementNode.parentNode;

// 获取前一个兄弟节点
var previousSibling = elementNode.previousSibling;

// 获取后一个兄弟节点
var nextSibling = elementNode.nextSibling;

5. 创建和删除节点:

创建新节点:
// 创建元素节点
var newElement = document.createElement("div");

// 创建文本节点
var newText = document.createTextNode("新的文本");

// 将新节点添加到文档中
elementNode.appendChild(newElement);

删除节点:
// 删除节点
elementNode.removeChild(childNode);

6. 示例:

考虑以下简单的XML文档:
<bookstore>
  <book>
    <title>Introduction to XML</title>
    <author>John Doe</author>
    <price>29.95</price>
  </book>
  <book>
    <title>XML and DOM Basics</title>
    <author>Jane Smith</author>
    <price>19.99</price>
  </book>
</bookstore>

使用JavaScript操作DOM:
// 获取文档对象
var xmlDoc = document;

// 获取第一个书籍的标题
var title = xmlDoc.getElementsByTagName("title")[0].textContent;
console.log("Title:", title);

// 修改第二个书籍的作者
var secondBookAuthor = xmlDoc.getElementsByTagName("author")[1];
secondBookAuthor.textContent = "New Author";

// 创建新的书籍元素并添加到文档中
var newBook = xmlDoc.createElement("book");
var newTitle = xmlDoc.createElement("title");
var newTitleText = xmlDoc.createTextNode("Advanced XML Programming");
newTitle.appendChild(newTitleText);
newBook.appendChild(newTitle);
xmlDoc.getElementsByTagName("bookstore")[0].appendChild(newBook);

这只是一个简单的入门示例,DOM提供了更多功能和方法,用于处理更复杂的文档结构和操作。在实际应用中,可以根据需要进一步深入学习DOM的各种功能和用法。


转载请注明出处:http://www.zyzy.cn/article/detail/14555/XML DOM