DOM中的兄弟节点

最新推荐文章于 2024-08-15 23:54:05 发布

安静的对折

最新推荐文章于 2024-08-15 23:54:05 发布

阅读量1.8k

点赞数 1

分类专栏： JS 文章标签： nextSibling previousSibling nextElementSibling

本文链接：https://blog.csdn.net/k491022087/article/details/52578854

版权

本文探讨了在DOM中如何获取兄弟节点，包括nextSibling和previousSibling属性，以及它们在不同浏览器之间的兼容性问题。重点讲解了这些属性在谷歌和火狐浏览器中如何处理文本节点，以及IE8及之前版本的不兼容性。

摘要由CSDN通过智能技术生成

nextSibling、previousSibling 获取下一个、上一个兄弟节点，谷歌火狐浏览器获取的文本节点，而IE8及之前的浏览器会忽略文本节点，获取的是下一个、上一个标签节点

nextElementSibling、previousSibling 获取下一个、上一个兄弟节点，谷歌火狐浏览器获取的是下一个、上一个标签节点，忽略文本节点，但是IE8及之前的浏览器不支持使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li id="li3">333</li>
    <li>444</li>
</ul>

<script>
    var li3 = document.getElementById("li3");
//    *****************下一个兄弟节点***********************
//    所有浏览器都支持，但是谷歌和火狐浏览器获取的是下一个文本节点，IE8及之前的浏览器会忽略文本节点，所以获取的是标签节点
    var lis = li3.nextSibling;
    console.log(lis.nodeType);  <strong><span style="color:#ff0000;"&