js属性方法操作访问关系

最新推荐文章于 2023-05-12 13:44:41 发布

约德尔蒙

最新推荐文章于 2023-05-12 13:44:41 发布

阅读量258

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/gyq04551/article/details/53242273

版权

Js 专栏收录该内容

64 篇文章 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>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js属性方法操作访问关系

我爱你中国//---------------------------js中的属性方法操作--------------------- //两种方式不能交换使用，赋值和获取值必须使用用一种方法。 var div = document.getElementById("box"); //元素节点.属性（元素节点[属性]）:绑定的属
复制链接

扫一扫