JavaScript DOM 兄弟节点常用属性

在JavaScript中，DOM（文档对象模型）兄弟节点是指与当前节点有相同父节点的其他节点。

常用属性

1. previousSibling：返回当前节点的前一个兄弟节点。如果不存在前一个兄弟节点，则返回 null。

2. nextSibling：返回当前节点的后一个兄弟节点。如果不存在后一个兄弟节点，则返回 null。

代码示例

假设我们有如下HTML结构：

<div id="parent">
  <div class="sibling">Sibling 1</div>
  <div class="sibling">Sibling 2</div>
  <div class="sibling">Sibling 3</div>
</div>

我们可以使用上述的属性来获取兄弟节点：

// 获取父节点
const parent = document.getElementById('parent');

// 获取第一个子节点的前一个兄弟节点
const previousSibling = parent.firstElementChild.previousSibling;

console.log(previousSibling); // 输出: null

// 获取第一个子节点的后一个兄弟节点
const nextSibling = parent.firstElementChild.nextSibling;

console.log(nextSibling); // 输出: <div class="sibling">Sibling 2</div>

在上面的示例中，我们使用了 getElementById 方法来获取父节点，然后使用 firstElementChild 属性来获取第一个子节点。然后，我们使用 previousSibling 和 nextSibling 属性来获取前一个兄弟节点和后一个兄弟节点。

需要注意的是，previousSibling 和 nextSibling 属性返回的是节点对象，如果没有兄弟节点，则返回的是 null。如果我们想要获取兄弟节点的文本内容，可以使用 textContent 属性。