js属性方法操作访问关系

我不是女神ヾ 2022-07-13 23:19 120阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="box" title="主体" class="asdfasdfadsfd">我爱你中国</div>
    <script>
    //---------------------------js中的属性方法操作---------------------
                //两种方式不能交换使用，赋值和获取值必须使用用一种方法。
                var div = document.getElementById("box");
                //元素节点.属性（元素节点[属性]）:绑定的属性值不会出现在标签上。
                //绑定aaa属性
                div.aaaa = "1111";
                console.log(div.aaaa);
                //get/set/removeAttribut: 绑定的属性值会出现在标签上。
                div.setAttribute("bbbb","2222");
                console.log(div.getAttribute("aaaa"));
                console.log(div.bbbb);
    
    
    
    //--------------------------------js中的访问关系----------------------------
                //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>