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
  • 相关阅读:
    C# 如何保证对象线程内唯一:数据槽(CallContext)【转载】
    关于面试!(简历篇)
    以Windows服务方式运行ASP.NET Core程序【转载】
    .Net Core 项目在Windows服务中托管【转载】
    【转载】Ocelot网关的路由热更新
    Kafka的配置文件详细描述
    C#枚举中的位运算权限分配浅谈
    CSS 三角形
    Entity Framework 7 动态 DbContext 模型缓存 ModelCaching
    ASP.NET5 MVC6 利用Middleware 创建可访问HttpContext 的业务类工厂。(代替HttpContext.Current)
  • 原文地址:https://www.cnblogs.com/ruigege0000/p/13586379.html
Copyright © 2011-2022 走看看