JS中兼容性写法举例

来源：互联网发布：怎么搭建python环境编辑：程序博客网时间：2024/05/17 01:07
<!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>
阅读全文
0 0