1. 遍历子节点（Child Nodes）：
通过 childNodes 属性可以获取节点的所有子节点。这个属性返回一个 NodeList 对象，可以通过索引访问其中的子节点。
var parentElement = document.getElementById("parent");
var childNodes = parentElement.childNodes;
for (var i = 0; i < childNodes.length; i++) {
var childNode = childNodes[i];
// 对每个子节点执行操作
console.log(childNode.nodeName);
}
2. 遍历父节点（Parent Node）：
通过 parentNode 属性可以获取节点的父节点。
var childElement = document.getElementById("child");
var parentNode = childElement.parentNode;
// 对父节点执行操作
console.log(parentNode.nodeName);
3. 遍历兄弟节点（Siblings）：
通过 nextSibling 和 previousSibling 属性可以获取节点的下一个兄弟节点和前一个兄弟节点。
var targetElement = document.getElementById("target");
var nextSibling = targetElement.nextSibling;
var previousSibling = targetElement.previousSibling;
// 对兄弟节点执行操作
console.log("Next Sibling:", nextSibling);
console.log("Previous Sibling:", previousSibling);
4. 遍历第一个和最后一个子节点：
通过 firstChild 和 lastChild 属性可以获取节点的第一个子节点和最后一个子节点。
var parentElement = document.getElementById("parent");
var firstChild = parentElement.firstChild;
var lastChild = parentElement.lastChild;
// 对第一个和最后一个子节点执行操作
console.log("First Child:", firstChild);
console.log("Last Child:", lastChild);
5. 遍历元素节点：
通过 getElementsByTagName 或 querySelectorAll 方法可以获取匹配某个标签名的元素节点集合，然后进行遍历。
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs[i];
// 对每个段落执行操作
console.log(paragraph.textContent);
}
示例：
考虑以下 HTML 片段：
<div id="parent">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<p id="target">Target Paragraph</p>
对应的 JavaScript 代码：
// 遍历子节点
var parentElement = document.getElementById("parent");
var childNodes = parentElement.childNodes;
console.log("Child Nodes:");
for (var i = 0; i < childNodes.length; i++) {
var childNode = childNodes[i];
console.log(childNode.nodeName);
}
// 遍历父节点
var childElement = document.getElementById("target");
var parentNode = childElement.parentNode;
console.log("Parent Node:");
console.log(parentNode.nodeName);
// 遍历兄弟节点
var nextSibling = childElement.nextSibling;
var previousSibling = childElement.previousSibling;
console.log("Next Sibling:", nextSibling);
console.log("Previous Sibling:", previousSibling);
// 遍历第一个和最后一个子节点
var firstChild = parentElement.firstChild;
var lastChild = parentElement.lastChild;
console.log("First Child:", firstChild.nodeName);
console.log("Last Child:", lastChild.nodeName);
// 遍历元素节点
var paragraphs = document.getElementsByTagName("p");
console.log("Paragraphs:");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs[i];
console.log(paragraph.textContent);
}
这个示例演示了如何使用不同的 DOM 遍历方法，通过访问子节点、父节点、兄弟节点和元素节点来操作文档的结构。这些遍历方法是在动态操作文档中非常有用的工具。
转载请注明出处：http://www.zyzy.cn/article/detail/14565/XML DOM