【124】JavaScript获取下一个、上一个兄弟节点

我最近工作中碰到一个需求，要获取某个 HTML 节点的下一个兄弟节点。通过查阅文档，得知要使用 nextSibling 属性。但是碰到一个问题：实际使用中，为了方便阅读代码，HTML标签之间必然有缩进；而 nextSibling 属性会把 HTML标签之间的空白字符当作 text 节点，算作下一个兄弟节点。

那么，这个问题该如何被解决呢？

我的整体思路如下： 利用循环不断获得下一个兄弟节点，然后判断这个节点是不是我需要的 HTML 标签。我写了例子，分别由 test.html 和 test.js 组成。

test.html

    



    

    
first
    

test.js

var ele = document.getElementById("div1").nextSibling
while (ele) {
    if (ele.tagName && ele.tagName.toLowerCase() == "div") {
        break;
    } else {
        ele = ele.nextSibling
    }
}
ele.innerHTML = "second";

运行后，浏览器中应该能看到文字 second。

类似的做法，我们可以获取上一个兄弟节点。例子是test2.html 和 test2.js

test2.html

    



    
Nothing
    

    

test2.js

var ele = document.getElementById("div1").previousSibling
console.log(ele)
while (ele) {
    if (ele.tagName && ele.tagName.toLowerCase() == "div") {
        break;
    } else {
        ele = ele.previousSibling
    }
}
ele.innerHTML = "Big brother";

浏览器运行的结果是显示文字：Big brother。