JS 兄弟节点|极客笔记

JS 兄弟节点

在 JavaScript 中，兄弟节点是指具有同一父节点的节点。在操作 DOM 元素时，经常需要获取兄弟节点，用来进行一些特定操作，比如添加样式、插入新元素等。本文将详细介绍如何在 JavaScript 中操作兄弟节点。

获取兄弟节点

要获取一个元素的兄弟节点，可以使用其父节点的 childNodes 属性或者 nextSibling 和 previousSibling 属性。下面分别介绍这两种方法。

使用 parentElement.childNodes

// HTML 结构
{/* <div id="parent">
    <p>第一个子元素</p>
    <p>第二个子元素</p>
    <p>第三个子元素</p>
</div> */}

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

// 获取父节点的所有子节点
var childNodes = parent.childNodes;

// 遍历所有子节点，排除文本节点
for (var i = 0; i < childNodes.length; i++) {
    if (childNodes[i].nodeType === 1) {
        console.log(childNodes[i]);
    }
}

在上面的示例中，我们首先获取了父元素 parent，然后使用 childNodes 属性获取了所有子节点，最后通过遍历所有子节点（注意需要排除文本节点）来获取所有的兄弟节点。

使用 nextSibling 和 previousSibling

// HTML 结构
{/* <div id="parent">
    <p>第一个子元素</p>
    <p>第二个子元素</p>
    <p>第三个子元素</p>
</div> */}

// 获取第一个子元素
var firstChild = document.getElementById('parent').firstElementChild;

// 获取下一个兄弟节点
var nextSibling = firstChild.nextSibling;

console.log(nextSibling);

在上面的示例中，我们首先获取了父元素 parent 的第一个子元素 firstChild，然后通过 nextSibling 属性获取了该子元素的下一个兄弟节点。同样，我们也可以使用 previousSibling 属性获取前一个兄弟节点。

操作兄弟节点

在 JavaScript 中，可以通过兄弟节点来进行一些操作，比如添加样式、插入新元素等。下面将介绍一些常见的操作方法。

添加样式

// HTML 结构
{/* <div id="parent">
    <p>第一个子元素</p>
    <p>第二个子元素</p>
    <p>第三个子元素</p>
</div> */}

// 获取兄弟节点
var siblings = document.getElementById('parent').childNodes;

// 遍历兄弟节点并添加样式
for (var i = 0; i < siblings.length; i++) {
    if (siblings[i].nodeType === 1) {
        siblings[i].style.color = 'red';
    }
}

在上面的示例中，我们首先通过 childNodes 属性获取了父元素 parent 的所有子节点，然后遍历了所有兄弟节点，并为每个兄弟节点添加了红色的颜色样式。

插入新元素

// HTML 结构
{/* <div id="parent">
    <p>第一个子元素</p>
    <p>第二个子元素</p>
</div> */}

// 创建新的 p 元素
var newElement = document.createElement('p');
newElement.textContent = '新的子元素';

// 获取父元素
var parent = document.getElementById('parent');

// 获取第一个子元素
var firstChild = parent.firstElementChild;

// 在第一个子元素前插入新元素
parent.insertBefore(newElement, firstChild);

在上面的示例中，我们首先创建了一个新的 p 元素 newElement，然后找到父元素 parent 和第一个子元素 firstChild，最后使用 insertBefore 方法将新元素插入到第一个子元素之前。