JavaScript连载15-节点属性设置、深浅克隆节点

发表评论
586 次浏览

A+

所属分类：Web前端

一、获取元素类型以及按类型挑选

<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.获取标签内的所有节点             var allNodeLists = box.childNodes;             console.log(allNodeLists);             //3.过滤元素节点             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>

JavaScript连载15-节点属性设置、深浅克隆节点

二、深浅克隆

克隆标签的相关操作

        //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);//浅克隆,只克隆本节点，不克隆内部的子节点             var newBox2 = btn.cloneNode(true);//深克隆             console.log(newBox2);//待ID的是不会被克隆出来的         }

JavaScript连载15-节点属性设置、深浅克隆节点

三、节点的属性设置

        //节点属性操作         window.onload = function (env) {             //1.获取节点             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.设置属性             img.setAttribute("src","img/img_01.png");             img.setAttribute("alt","如花");             img.setAttribute("class","图片");              //4.删除属性             // img.remove();//这句就把img这个标签删除了             img.removeAttribute("alt");         }

JavaScript连载15-节点属性设置、深浅克隆节点