写写原生JavaScript系列(4)-获取父节点、兄弟节点

元素节点操作

获取节点父元素,直接使用一个兼容各个浏览器的方法

var el = document.querySelector('div');
var parent = el.parentNode;

获取下一个、前一个或者所有的兄弟元素并且根据选择器过滤
获取兄弟元素并过滤

function getSiblings(el, filter) {
    var siblings = [];
    el = el.parentNode.firstChild;
    do { if (!filter || filter(el)) siblings.push(el); } while (el = el.nextSibling);
    return siblings;
}

// example filter function
function exampleFilter(el) {
    return elem.nodeName.toLowerCase() == 'a';
}

用法

el = document.querySelector('div');
// get all siblings of el
var sibs = getSiblings(el);
// get only anchor element siblings of el
var sibs_a = getSiblings(el, exampleFilter);

更快速的获取前一个或者下一个兄弟节点的方法

var previous = el.previousSibling;
var next = el.nextSibling;
Get all following siblings of an element, optionally filtered:

接受一个过滤条件参数的俄获取后面兄弟节点的方法

function getNextSiblings(el, filter) {
    var siblings = [];
    while (el= el.nextSibling) { if (!filter || filter(el)) siblings.push(el); }
    return siblings;
}

接受一个过滤条件参数的俄获取前面兄弟节点的方法

function getPreviousSiblings(el, filter) {
    var siblings = [];
    while (el = el.previousSibling) { if (!filter || filter(el)) siblings.push(el); }
    return siblings;
}

原文出处

https://plainjs.com/javascript/traversing/match-element-selector-52/