在 XML DOM 中，导航是指在文档结构中移动和定位到不同的节点。通过导航，可以遍历文档树、访问父子节点、兄弟节点等，以便进行节点的查找、访问和修改。以下是一些常见的 DOM 导航方法：

1. 父节点和子节点：

  •  parentNode 属性： 获取当前节点的父节点。

  var parentNode = node.parentNode;

  •  childNodes 属性： 获取当前节点的所有子节点。

  var childNodes = node.childNodes;

2. 第一个和最后一个子节点：

  •  firstChild 属性： 获取当前节点的第一个子节点。

  var firstChild = node.firstChild;

  •  lastChild 属性： 获取当前节点的最后一个子节点。

  var lastChild = node.lastChild;

3. 兄弟节点：

  •  nextSibling 属性： 获取当前节点的下一个兄弟节点。

  var nextSibling = node.nextSibling;

  •  previousSibling 属性： 获取当前节点的前一个兄弟节点。

  var previousSibling = node.previousSibling;

4. 遍历子节点：

遍历当前节点的所有子节点。
for (var i = 0; i < node.childNodes.length; i++) {
  var childNode = node.childNodes[i];
  // 对每个子节点执行操作
}

5. 元素节点的子元素：

  •  children 属性： 获取当前元素节点的所有子元素。

  var children = element.children;

6. 查询父节点中的子元素：

  •  querySelector 和 querySelectorAll 方法： 在当前节点内查询匹配选择器的第一个元素或所有元素。

  var element = node.querySelector(".exampleClass");
  var elements = node.querySelectorAll("p");

示例：

考虑以下 HTML 片段：
<div id="parent">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

对应的 JavaScript 代码：
// 获取父节点
var parentElement = document.getElementById("parent");

// 获取第一个和最后一个子节点
var firstChild = parentElement.firstChild;
var lastChild = parentElement.lastChild;

console.log("First Child:", firstChild);
console.log("Last Child:", lastChild);

// 遍历子节点
for (var i = 0; i < parentElement.childNodes.length; i++) {
  var childNode = parentElement.childNodes[i];
  console.log("Child Node:", childNode);
}

// 获取所有子元素
var children = parentElement.children;
console.log("Children:", children);

// 获取下一个兄弟节点和前一个兄弟节点
var secondParagraph = firstChild.nextSibling.nextSibling;
var firstParagraph = secondParagraph.previousSibling.previousSibling;

console.log("Next Sibling:", secondParagraph);
console.log("Previous Sibling:", firstParagraph);

// 在父节点中查询匹配选择器的元素
var foundElement = parentElement.querySelector(".exampleClass");
console.log("Found Element:", foundElement);

// 在父节点中查询所有匹配选择器的元素
var foundElements = parentElement.querySelectorAll("p");
console.log("Found Elements:", foundElements);

这个示例演示了如何在 XML DOM 中进行节点导航，包括获取父节点、子节点、兄弟节点、遍历子节点等操作。这些导航方法是在 DOM 操作中非常有用的，可以灵活地定位和处理文档中的各个节点。


转载请注明出处：http://www.pingtaimeng.com/article/detail/14567/XML DOM