js 实现siblings

实现 siblings 方法

在原生 JavaScript 中，DOM 元素没有直接提供 siblings 方法，但可以通过组合 parentNode 和 children 属性来实现。

方法一：过滤兄弟节点

Element.prototype.siblings = function() {
    const children = this.parentNode.children;
    return Array.from(children).filter(child => child !== this);
};

方法二：使用 previousSibling 和 nextSibling

Element.prototype.siblings = function() {
    let siblings = [];
    let sibling = this.previousSibling;

    while (sibling) {
        if (sibling.nodeType === 1) {
            siblings.push(sibling);
        }
        sibling = sibling.previousSibling;
    }

    sibling = this.nextSibling;
    while (sibling) {
        if (sibling.nodeType === 1) {
            siblings.push(sibling);
        }
        sibling = sibling.nextSibling;
    }

    return siblings;
};

使用示例

const element = document.getElementById('target');
const siblings = element.siblings();
console.log(siblings); // 输出所有兄弟节点数组

注意事项

1. 方法一会返回所有同级的元素节点，不包括文本节点等其他类型节点
2. 方法二需要手动过滤非元素节点（nodeType === 1）
3. 扩展原生对象的原型可能会与其他库产生冲突
4. 如果不希望修改原型，可以创建独立函数：

function getSiblings(el) {
    return Array.from(el.parentNode.children).filter(child => child !== el);
}

这些实现方式都能获取到指定元素的所有兄弟元素节点，根据具体需求选择合适的方法。