JavaScript連載15-節(jié)點屬性設(shè)置、深淺克隆節(jié)點

路人甲Java 2021-09-22

展開全文

一、獲取元素類型以及按類型挑選

<body>
    <div id = "box">
        <p id="word">xiaoming</p>
        <!--<button id="btn">點我</button>-->
    </div>
    <script>
        window.onload = function (ev) {
            //1.獲取標簽
            var box = document.getElementById("box");
            console.log(box);
            //2.獲取標簽內(nèi)的所有節(jié)點
            var allNodeLists = box.childNodes;
            console.log(allNodeLists);
            //3.過濾元素節(jié)點
            var newListArr = [];
            allNodeLists.forEach(function (value,key,parent) {
                console.log("value.nodeType是：" + value.nodeType);
                console.log("value是："+value);
                console.log("key是：" + key);
                console.log("parent是" + parent);
                if(value.nodeType == 1){
                    newListArr.push(value);//復習一下表添加元素
                }
            });
            console.log(newListArr);
        }
    </script>
</body>

30.1
30.2

二、深淺克隆

克隆標簽的相關(guān)操作

        //2.刪除標簽
        var btn = document.getElementById("button");
        var btnd = btn[0];
        btn.remove(btnd);
        window.onload = function (ev) {
            //3.克隆標簽
            var newBox = btn.cloneNode();
            console.log(newBox);//淺克隆,只克隆本節(jié)點，不克隆內(nèi)部的子節(jié)點
            var newBox2 = btn.cloneNode(true);//深克隆
            console.log(newBox2);//待ID的是不會被克隆出來的
        }

30.3

三、節(jié)點的屬性設(shè)置

        //節(jié)點屬性操作
        window.onload = function (env) {
            //1.獲取節(jié)點
            var img = document.getElementsByTagName("img")[0];
            console.log(img);

            //2.獲取標簽的屬性
            console.log(img.getAttribute("src"));
            console.log(img.getAttribute("alt"));
            console.log(img.src);
            console.log(img.alt);

            //3.設(shè)置屬性
            img.setAttribute("src","img/img_01.png");
            img.setAttribute("alt","如花");
            img.setAttribute("class","圖片");

            //4.刪除屬性
            // img.remove();//這句就把img這個標簽刪除了
            img.removeAttribute("alt");
        }

30.4