版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhangchao19890805/article/details/82809601
我最近工作中碰到一个需求，要获取某个 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。