JS兄弟节点的获取

最新推荐文章于 2023-12-14 11:20:07 发布

tong_struggller

最新推荐文章于 2023-12-14 11:20:07 发布

阅读量2.4k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/tong_struggller/article/details/81670871

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟节点</title>
</head>
    <script>
        window.onload=function () {
            var demo=document.getElementById("one");
            //demo.nextSibling.style.backgroundColor="red";
            var one=demo.nextElementSibling || demo.nextSibling;   //下一个兄弟节点  先写支持正常发浏览器的，再写支持ie678的
            one.style.backgroundColor="red";   //设置为红色

            //上一个兄弟节点
            var two=demo.previousElementSibling || demo.previousSibling;  //上一个兄弟节点  先写支持正常发浏览器的，再写支持ie678的
            two.style.backgroundColor="blue";
        }
    </script>
            <!-- nextSibling  下一个兄弟节点       仅支持ie 678 认识
            nextElementSibling   其他浏览器认识的
            previousSibling   同理  上一个兄弟节点
            previousElementSibling
            
            firstChild    第一个孩子  ie678
            firstElementChild  第一个孩子   正常浏览器  
            var one.firstElementChild || one.firstChild;   
    
            lastChild
            lastElementChild
            -->
<body>
    <ul>
        <li>123</li>
        <li>121</li>
        <li id="one">12345</li>
        <li>1111</li>
        <li>111111</li>
        <li>111</li>
        <li>11111</li>
        <li>111</li>
    </ul>
</body>
</html>

tong_struggller

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS兄弟节点的获取

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;兄弟节点&lt;/title&gt;&lt;/head&gt; &lt;script&gt; win
复制链接

扫一扫

专栏目录