子节点父节点下级节点

最新推荐文章于 2024-06-28 16:43:06 发布

原创最新推荐文章于 2024-06-28 16:43:06 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种兼容性良好的方法来获取DOM树中的特定节点，这种方法尤其关注于解决不同浏览器之间的兼容性问题。文中详细解释了如何使用firstElementChild、lastElementChild、nextElementSibling及previousElementSibling等属性来准确地定位DOM树中的元素，并提供了一个适用于IE6及以上版本浏览器的示例代码。

        </head>
        <!--
         var u1 = u.childNodes.length; // 11  此方法浏览器的兼容性很差   但是我测试过现在都是一样的
         alert(u1);
         通过标签来取  parentNode  父节点   firstChild 首节点    lastChild 尾节点
         nextSibling   相同节点树层级的下一个节点     previousSibling   返回位于相同节点树层级的前一个元素

         firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理，但是有代替属性

        所以为了准确地找到相应的元素，会用

        firstElementChild,

        lastElementChild,

        nextElementSibling,

        previousElementSibling

        兼容的写法，这是JavaScript自带的属性。

        但坏消息是IE6,7,8不兼容这些属性。IE9以上和火狐谷歌支持。

        于是我写了一个接口口，测试能在包括ie6在内运行的函数（自己写的，不知有没有其他什么细节错误没注意，反正能运行并且过滤文本节点获取正确的下一个元素节点）
        -->
        <body>
        <ul id = "ul01">
            <li id="id1">001</li>
            <li id="id2">002</li>
            <li id="id3">003</li>
            <li id="id4">004</li>
            <li id="id5">005</li>
        </ul>
        <script type="text/javascript">
             var s = document.getElementById("id4");
             var s1 = s.nextElementSibling;
            alert(s1.id) ;
        </script>
        </body>