JS中兼容性写法举例

最新推荐文章于 2023-05-19 20:06:28 发布

ANIYM

最新推荐文章于 2023-05-19 20:06:28 发布

阅读量224

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34272315/article/details/78866514

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            list-style: none;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 5px;
        }
    </style>
</head>
<body>

<ul>
    <li class="box1"></li>
    <li class="box2"></li>
    <li id="box3"></li>
    <li class="box4"></li>
    <li class="box5"></li>
</ul>

<script>

    //parentNode父盒子
    var box3 = document.getElementById("box3");
    box3.parentNode.style.backgroundColor = "blue";

    //兄弟节点（前一个和后一个：previousSibling和nextSibling）
    //previousElementSibling和nextElementSibling在IE678中不支持。IE678不能获取文本节点。
//    box3.previousElementSibling.style.backgroundColor = "red";
//    box3.nextElementSibling.style.backgroundColor = "yellow";
//    box3.previousSibling.style.backgroundColor = "red";
//    box3.nextSibling.style.backgroundColor = "yellow";
    var pre = box3.previousElementSibling || box3.previousSibling;
    var net = box3.nextElementSibling || box3.nextSibling;
    pre.style.backgroundColor = "red";
    net.style.backgroundColor = "yellow";

    //单个子元素（firstChild和lastChild）
//    box3.parentNode.firstElementChild.style.backgroundColor = "orange";
//    box3.parentNode.lastElementChild.style.backgroundColor = "green";
    var first = box3.parentNode.firstElementChild || box3.parentNode.firstChild;
    var last = box3.parentNode.lastElementChild || box3.parentNode.lastChild;
    first.style.backgroundColor = "orange";
    last.style.backgroundColor = "green";


    //所有子元素
    var arr = box3.parentNode.children;
    for(var i=0;i<arr.length;i++){
        arr[i].style.backgroundColor = "black";
    }

    console.log(box3.parentNode.childNodes);
    var arr2 = box3.parentNode.childNodes;
    for(var i=0;i<arr2.length;i++){
        if(arr2[i].nodeType === 1){
            console.log(arr2[i]);
        }
    }

    //随意获取指定兄弟节点
    var index = 0;
    var node = box3.parentNode.children[index];


    //获取所有的兄弟节点
    function siblings(elm) {
        var a = [];
        var p = elm.parentNode.children;
        for(var i =0;i<p.length;i++) {
            if(p[i] !== elm) {
                a.push(p[i]);
            }
        }
        return a;
    }

</script>
</body>
</html>