欢迎光临
我的个人博客网站

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


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

<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-节点属性设置、深浅克隆节点
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-节点属性设置、深浅克隆节点

三、源码:

  • D30_ElementType.html
  • D30_2_Clone.html
  • 地址:https://github.com/ruigege66/JavaScript/blob/master/D30_ElementType.html
  • https://github.com/ruigege66/JavaScript/blob/master/D30_2_Clone.html
  • 博客园:https://www.cnblogs.com/ruigege0000/
  • CSDN:https://blog.csdn.net/weixin_44630050?t=1
  • 欢迎关注微信
赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript连载15-节点属性设置、深浅克隆节点
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏