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>

二、深浅克隆

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

三、节点的属性设置

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

三、源码:

  • 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)

相关推荐

  • ES6中类和对象的注意问题

    实用类的注意事项 三个注意点: 1.在ES中类没有变量的提升,所以必须先定义类,才能通过实例化对象 2.类里面的共有属性和方法一定要加this使用 3.类里面的this使用问题: 4.construc ...

  • JS异步单线程与内置对象面试

    什么是异步? <script> //异步 console.log(1); setTimeout(function(){ alert(2); },1000); console.log(3); ...

  • 彻底搞明白this

    this是我们在书写代码时最常用的关键词之一,即使如此,它也是JavaScript最容易被最头疼的关键词.那么this到底是什么呢? 如果你了解执行上下文,那么你就会知道,其实this是执行上下文对象 ...

  • IdentityServer4 (4) 静默刷新(Implicit)

    写在前面 1.源码(.Net Core 2.2) git地址:https://github.com/yizhaoxian/CoreIdentityServer4Demo.git 2.相关章节 2.1. ...

  • JavaScript中的DOM与BOM

    DOM 概念 文档对象模型 (Document Object Model,简称DOM) 将 web 页面与到脚本或编程语言连接起来.通常是指 JavaScript,但将 HTML.SVG 或 XML ...

  • JavaScript连载29-元素类型获取、节点CD

    一.元素类型分类 常量名 常量值 节点类型 描述 Node.ELEMENT_NODE 1 Element 代表元素 Node.ATTRIBUTE_NODE 2 Attr 代表属性 Node.TEXT_ ...

  • JavaScript-观察者模式

    观察者模式 发布&订阅 一对多 示例:点好咖啡之后坐等被叫 传统 UML 类图 javascript 中的 UML 类图 应用场景 网页事件绑定 <button id="btn ...

  • js中的DOM操作

    一.前言 DOM 是 W3C(World Wide Web Consortium)标准.同时也 定义了访问诸如 XML 和 HTML 文档的标准: DOM是一个使程序和脚本有能力动态地访问和更新文档的 ...

  • 【兵营情事连载15】生产队长想把女儿嫁到城里,找商品粮干部,女儿却爱上兵哥

    兵营情事连载15 作者:石头大侠 [作者简介]石津安,笔名,石头大侠.1959年出生,1976年下乡,1978年入伍,2001年自主择业.荣立二等功一次,三等功五次.军旅长篇纪实作品"兵营往 ...

  • 15个iPhone设置,让你轻松使用自己iphone手机

    从使用面部遮盖物的Face ID到"请勿打扰"和更长的电池寿命,只需进行一些快速设置更改,即可立即在iPhone上实现所有功能. 调整iPhone 12上的某些设置,以充分利用Ap ...

  • 历代画论(连载15)唐宋:《画继》(宋)邓椿 撰

    ●关于<画继> <画继>中国南宋绘画史著作.邓椿著.邓椿,字公寿,四川成都双流人 ,官至通判 ,家富书画收藏,因感于北宋郭若虚<图画见闻志>后90余年无人续著绘画史 ...

  • H5 video poster属性设置视频封面的方法

    这篇文章主要介绍了H5 video poster属性设置视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 打开一个视频,在点击播放之前会看到一张封面 ...

  • 如何把EPLAN的显示属性设置成默认?

    我们今天就来看看如何能将元件的属性排列设置成默认. "如何把EPLAN的显示属性设置成默认?",以前我一直以为这不是什么大问题,但近来也是有不少网友问到这个问题,这些小细节多了,总 ...

  • 长篇小说《风起2》连载15

    酒杯碰得蹦蹦蹦响 "江东美食汇"流量确实上去了,这使小强他们三个都十分高兴.尤其是吕萍萍,一天到晚要查看点击率.因为现场直播以后,平台还在定时推送,一些粉丝也会回过头来再看一遍,所 ...

  • delphi 常用控件属性设置 (第一篇)

    DELPHI常见属性说明: ALIGN 设置组件对齐(同其父容器)方式 BORDERSTYLE 设置组件边框形状 CAPTION 设置组件标题 CTL3D 设置组件边框是否为3D模式,若BORDERS ...

  • (连载15)《华表·中国》第四章华表溯源 第五节

    第五节 上古华夏天下大同 中国自古称华夏.朴实无华的神话传说,还原华夏先祖早期生活,重拾中华民族万年记忆.灵山秀水之间仙境一样的母系氏族华胥国令人神往,禁不住回望那个无比遥远的上古社会.中华民族起源, ...