• 技术文章 >web前端 >js教程

    JavaScript知识点整理之获取元素和节点

    WBOYWBOY2022-05-16 17:58:57转载690
    本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于获取元素和节点的相关内容,包括了通过id、类名、name、标签名获取元素,创建、删除、克隆节点等问题,下面一起来看一下,希望对大家有帮助。

    大前端成长进阶课程:进入学习

    【相关推荐:javascript视频教程web前端

    获取元素

    1.通过ID获取(getElementById)

    // 1 获取元素节点
        // 通过id的方式( 通过id查找元素,大小写敏感,如果有多个id只找到第一个)
        document.getElementById('p1');

    2.通过类名(getElementsByClassName)

        // 通过类名查找元素,多个类名用空格分隔,得到一个HTMLCollection(一个元素集合,有length属性,可以通过索引号访问里面的某一个元素)
        var cls = document.getElementsByClassName('a b');
        console.log(cls);

    3.通过name属性(getElementsByName)

     // 通过name属性查找,返回一个NodeList(一个节点集合,有length属性,可以通过索引号访问)
       var nm =  document.getElementsByName('c');
        console.log(nm);

    4.通过标签名(getElementsByTagName)

        // 通过标签名查找元素 返回一个HTMLCollection
        document.getElementsByTagName('p');

    5.通过选择器获取一个元素(querySelector)

    document.querySelector('.animated')

    6.通过选择器获取一组元素(querySelectorAll)

    document.querySelector('.animated')

    获取节点

    在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性

    1. nodeName : 节点的名称

    2. nodeValue :节点的值

    3. nodeType :节点的类型

    一、nodeName 属性: 节点的名称,是只读的。

    二、nodeValue 属性:节点的值

    三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:

    创建节点:

    1.创建节点:createElement('')

     // 创建元素,只是创建出来并未添加到html中,需要与appendChild 配合使用
        var elem = document.createElement('p');
        elem.id = 'test';
        elem.style = 'color: red';
        elem.innerHTML = '我是新创建的节点';
        document.body.appendChild(elem);

    2.插入节点:appendChild ()

     var oNewp=document.createElement("p");
          var oText=document.createTextNode("World Hello");
          oNewp.appendChild(oText);

    2-1.插入节点:insertBefore()

         var oOldp=document.body.getElementsByTagName("p")[0];
          document.body.insertBefore(oNewp,oOldp);

    删除节点

    1.删除节点:removeChild

       var op=document.body.getElementsByTagName("p")[0];
             op.parentNode.removeChild(op);

    克隆节点

    1.克隆节点:parent.cloneNode() false 或者true

      // 克隆节点(需要接受一个参数来表示是否复制元素)
        var form =  document.getElementById('test');
        var clone = form.cloneNode(true);
        clone.id = 'test2';
        document.body.appendChild(clone);

    替换节点

    1.替换节点 方法node.replace(new,old)

           var oOldp=document.body.getElementsByTagName("p")[0];
           oOldp.parentNode.replaceChild(oNewp,oOldp);

    文档碎片框

     (function()
        {
            var start = Date.now();
            var str = '', li;
            var ul = document.getElementById('ul');
            var fragment = document.createDocumentFragment();
            for(var i=0; i<10000; i++)
            {
                li = document.createElement('li');
                li.textContent = '第'+i+'个子节点';
                fragment.appendChild(li);
            }
            ul.appendChild(fragment);
            console.log('耗时:'+(Date.now()-start)+'毫秒'); // 63毫秒
        })();

    【相关推荐:javascript视频教程web前端

    以上就是JavaScript知识点整理之获取元素和节点的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript
    上一篇:一文浅析angular中的组件模板 下一篇:angular学习之聊聊指令和管道
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• 一起来分析JavaScript中的弱引用和强引用• JavaScript详细解析之网络请求与远程资源• 完全掌握JavaScript运行机制及原理• JavaScript经典基础详解之函数• JavaScript对象的构造函数和new操作符(实例详解)
    1/1

    PHP中文网