【124】JavaScript獲取下一個、上一個兄弟節點
阿新 • • 發佈:2018-12-11
我最近工作中碰到一個需求,要獲取某個 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。