js属性方法操作访问关系

来源：互联网发布：淘宝卖家下载阿里旺旺编辑：程序博客网时间：2024/06/05 02:06
<!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>
0 0
js属性方法操作 访问关系

js属性方法操作访问关系
