我最近工作中碰到一個需求，要獲取某個 HTML 節點的下一個兄弟節點。通過查閱文檔，得知要使用 nextSibling 屬性。但是碰到一個問題：實際使用中，爲了方便閱讀代碼，HTML標籤之間必然有縮進；而 nextSibling 屬性會把 HTML標籤之間的空白字符當作 text 節點，算作下一個兄弟節點。
那麼，這個問題該如何被解決呢？
我的整體思路如下： 利用循環不斷獲得下一個兄弟節點，然後判斷這個節點是不是我需要的 HTML 標籤。我寫了例子，分別由 test.html 和 test.js 組成。
test.html
<html>
<head>
<title>test</title>
</head>
<body>
<div id="div1"></div>
<div>first</div>
<script src="test.js"></script>
</body>
</html>
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
<html>
<head>
<title>test</title>
</head>
<body>
<div>Nothing</div>
<div id="div1"></div>
<script src="test2.js"></script>
</body>
</html>
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。