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); // 输出所有兄弟节点数组注意事项
- 方法一会返回所有同级的元素节点，不包括文本节点等其他类型节点
- 方法二需要手动过滤非元素节点（nodeType === 1）
- 扩展原生对象的原型可能会与其他库产生冲突
- 如果不希望修改原型，可以创建独立函数：
function getSiblings(el) {
return Array.from(el.parentNode.children).filter(child => child !== el);
}这些实现方式都能获取到指定元素的所有兄弟元素节点，根据具体需求选择合适的方法。
