js 怎么获取兄弟节点

使用JavaScript获取兄弟节点的方法包括：使用previousElementSibling、nextElementSibling、previousSibling、nextSibling等方法。 其中，最常用的方法是通过previousElementSibling和nextElementSibling来获取上一个和下一个兄弟元素节点。previousElementSibling返回当前元素之前的第一个兄弟元素节点，nextElementSibling返回当前元素之后的第一个兄弟元素节点。以下是详细描述和使用示例。

一、使用`previousElementSibling`和`nextElementSibling`

1.1 `previousElementSibling`

previousElementSibling属性返回当前元素之前的第一个兄弟元素节点。如果没有这样的节点，则返回null。这个属性非常适合用来查找当前元素的上一个兄弟元素。

let element = document.getElementById("myElement");
let previousSibling = element.previousElementSibling;
if (previousSibling) {
    console.log("Previous sibling element:", previousSibling);
} else {
    console.log("No previous sibling element found");
}

1.2 `nextElementSibling`

nextElementSibling属性返回当前元素之后的第一个兄弟元素节点。如果没有这样的节点，则返回null。这个属性通常用于查找当前元素的下一个兄弟元素。

let element = document.getElementById("myElement");
let nextSibling = element.nextElementSibling;
if (nextSibling) {
    console.log("Next sibling element:", nextSibling);
} else {
    console.log("No next sibling element found");
}

二、使用`previousSibling`和`nextSibling`

2.1 `previousSibling`

previousSibling属性返回当前节点前面的兄弟节点，包括文本节点。如果需要获取前面的元素节点，可以结合nodeType属性来判断。

let element = document.getElementById("myElement");
let previousSibling = element.previousSibling;
while (previousSibling && previousSibling.nodeType !== 1) { // 1表示元素节点
    previousSibling = previousSibling.previousSibling;
}
if (previousSibling) {
    console.log("Previous sibling node:", previousSibling);
} else {
    console.log("No previous sibling node found");
}

2.2 `nextSibling`

nextSibling属性返回当前节点后面的兄弟节点，包括文本节点。同样，可以结合nodeType属性来判断以获取元素节点。

let element = document.getElementById("myElement");
let nextSibling = element.nextSibling;
while (nextSibling && nextSibling.nodeType !== 1) { // 1表示元素节点
    nextSibling = nextSibling.nextSibling;
}
if (nextSibling) {
    console.log("Next sibling node:", nextSibling);
} else {
    console.log("No next sibling node found");
}

三、获取所有兄弟节点

3.1 使用`parentNode`和`childNodes`

有时我们需要获取当前元素的所有兄弟节点。这时可以通过parentNode属性获取父节点，然后遍历父节点的所有子节点来筛选兄弟节点。

let element = document.getElementById("myElement");
let parent = element.parentNode;
let siblings = [];
for (let i = 0; i < parent.childNodes.length; i++) {
    if (parent.childNodes[i] !== element && parent.childNodes[i].nodeType === 1) { // 1表示元素节点
        siblings.push(parent.childNodes[i]);
    }
}
console.log("All sibling elements:", siblings);

3.2 使用`Array.prototype.filter`

另一种获取所有兄弟节点的方式是使用Array.prototype.filter方法来简化筛选过程。

let element = document.getElementById("myElement");
let siblings = Array.prototype.filter.call(element.parentNode.children, function(child) {
    return child !== element;
});
console.log("All sibling elements:", siblings);

四、实战应用

4.1 动态样式切换

假设我们有一个列表，当点击某个列表项时，其兄弟节点的样式需要动态变化：

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

document.getElementById("myList").addEventListener("click", function(event) {
    if (event.target.tagName.toLowerCase() === 'li') {
        let siblings = Array.prototype.filter.call(event.target.parentNode.children, function(child) {
            return child !== event.target;
        });
        siblings.forEach(function(sibling) {
            sibling.style.backgroundColor = "lightgray";
        });
        event.target.style.backgroundColor = "lightblue";
    }
});

4.2 表单验证提示

在表单中，当某个输入框验证失败时，可以显示其旁边的提示信息：

<form id="myForm">
    <label for="input1">Input 1:</label>
    <input id="input1" type="text">
    <span class="error-message">Error message 1</span><br>
    <label for="input2">Input 2:</label>
    <input id="input2" type="text">
    <span class="error-message">Error message 2</span><br>
</form>

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();
    let inputs = document.querySelectorAll("#myForm input");
    inputs.forEach(function(input) {
        if (!input.value) {
            let errorMessage = input.nextElementSibling;
            if (errorMessage && errorMessage.classList.contains("error-message")) {
                errorMessage.style.display = "inline";
            }
        }
    });
});

五、浏览器兼容性

5.1 `previousElementSibling`和`nextElementSibling`

previousElementSibling和nextElementSibling在现代浏览器中都得到了良好的支持，几乎所有的主流浏览器都可以使用这两个属性。

5.2 `previousSibling`和`nextSibling`

previousSibling和nextSibling同样得到了广泛的支持，但由于它们可能返回非元素节点（例如文本节点），使用时需要额外的判断。

5.3 Polyfill

对于极少数不支持的旧版浏览器，可以使用Polyfill来确保兼容性。以下是previousElementSibling的Polyfill示例：

if (!Element.prototype.previousElementSibling) {
    Object.defineProperty(Element.prototype, 'previousElementSibling', {
        get: function() {
            let e = this.previousSibling;
            while (e && e.nodeType !== 1) {
                e = e.previousSibling;
            }
            return e;
        }
    });
}

综上所述，使用JavaScript获取兄弟节点的方法多种多样，根据实际需求选择合适的方法非常重要。通过上述介绍和示例，相信读者能够更好地理解和运用这些方法来实现各种功能。

js 怎么获取兄弟节点

一、使用previousElementSibling和nextElementSibling

1.1 previousElementSibling

1.2 nextElementSibling

二、使用previousSibling和nextSibling

2.1 previousSibling

2.2 nextSibling