zoukankan      html  css  js  c++  java
  • 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>
    

    30.1
    30.2

    二、深浅克隆

    • 克隆标签的相关操作
            //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的是不会被克隆出来的
            }
    

    30.3

    三、节点的属性设置

            //节点属性操作
            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");
            }
    

    30.4

    三、源码:

    • 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
    • 欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流
      911
  • 相关阅读:
    一个简单的jsp自定义标签
    js正则表达式学习
    java获取当前日期等以及时区
    java日期处理SimpleDateFormat等
    一个炫酷的导航菜单,模仿别人写的
    后台管理界面自己写,模仿,更新中...
    信息收集-主机综合扫描工具的使用
    ms10_046_shortcut_icon_dllloader漏洞利用和ettercap dns欺骗
    如何成为一名黑客
    msf常用命令
  • 原文地址:https://www.cnblogs.com/ruigege0000/p/13586379.html
Copyright © 2011-2022 走看看