js Element Traversal规范中的元素遍历方法

JS Element Traversal规范在DOM操作中提供了一些方便的元素遍历方法，能够帮助我们更方便地查找或操作页面元素。

其中主要包括以下几个方法：

children

element.children方法会返回指定元素的所有子元素节点，不包含文本节点或注释节点。

示例：

<div id="parent">
  <p>子元素1</p>
  <p>子元素2</p>
  <p>子元素3</p>
</div>

const parentElement = document.getElementById('parent');
const childElements = parentElement.children;

console.log(childElements); // 返回三个p元素节点，不包含文本节点或注释节点

firstElementChild 和 lastElementChild

element.firstElementChild和element.lastElementChild方法会分别返回指定元素的第一个和最后一个子元素节点，不包含文本节点或注释节点。

示例：

<div id="parent">
  <p>子元素1</p>
  <p>子元素2</p>
  <p>子元素3</p>
</div>

const parentElement = document.getElementById('parent');
const firstChild = parentElement.firstElementChild;
const lastChild = parentElement.lastElementChild;

console.log(firstChild); // 返回第一个子元素p节点，不包含文本节点或注释节点
console.log(lastChild); // 返回最后一个子元素p节点，不包含文本节点或注释节点

previousElementSibling 和 nextElementSibling

element.previousElementSibling和element.nextElementSibling方法会分别返回指定元素的前一个和后一个兄弟元素节点，不包含文本节点或注释节点。如果没有前/后一个兄弟节点，则返回null。

示例：

<div id="parent">
  <p>子元素1</p>
  <p>子元素2</p>
  <p>子元素3</p>
</div>

const secondElement = document.getElementsByTagName('p')[1];
const firstSibling = secondElement.previousElementSibling;
const lastSibling = secondElement.nextElementSibling;

console.log(firstSibling); // 返回上一个兄弟元素节点p1，不包含文本节点或注释节点
console.log(lastSibling); // 返回下一个兄弟元素节点p3，不包含文本节点或注释节点

以上就是JS Element Traversal规范中的元素遍历方法，希望能够对你有所帮助。