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