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

2024年5月17日 290次阅读 来源: zhangchao19890805

我最近工作中碰到一个需求，要获取某个 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。

    原文作者：zhangchao19890805
    原文地址: https://blog.csdn.net/zhangchao19890805/article/details/82809601
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞