Dom基础

最新推荐文章于 2025-12-11 21:57:31 发布

原创最新推荐文章于 2025-12-11 21:57:31 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #dom

js基础编专栏收录该内容

24 篇文章

订阅专栏

本文深入解析了DOM中各种元素的选择方法，包括getElementById, getElementsByTagName等，并详细介绍了如何使用这些方法进行元素的创建、插入及删除操作。同时，文章还对比了不同选择器的特点与适用场景。

选择器

        // 通过id获取元素
        var div1 = document.getElementById("div");
        //通过标签名获取元素 需要下标区分
        var div2 = document.getElementsByTagName("div")[0]; 
        //通过class类名获取元素 需要下标区分
        var div3 = document.getElementsByClassName("div")[0];
        //通过name名获取元素  需要下标区分
        var div4 = document.getElementsByName("div")[0];
        // css选择器 
        var div5 = document.querySelector(".div>span");
        //css选择器选择一组；
        var div6 = document.querySelectorAll(".div");
DOM基本操作
            1，getElementById方法定义在Document.prototype上，
                即ELement节点上不能使用。
            2，getElementsByName方法定义在HTMLDocument.prototype
                ，即非HMTL中的docment不能使用（xml document，Element）
            3, getElementsByTagNmae方法定义在Document.prototype
                和Element.prototype上
            4，HTMLDocument.prototype定义了一些常用的属性,body，head，分别指代
                HTML文档中的body head标签。
            5，Document.prototype上定义了document属性，指代文档的根元素，在HTML
                文档中，它总是指代html元素
            6，getELementsByClassName，querySelector
                querySelectorAll在Document.prototype,Element.prototype
                类中均有定义
  // 创建元素节点
        var div = document.createElement('div');
        //创建文本节点
        var text = document.createTextNode('text');
        //创建注释节点
        var comment = document.createComment("this is comment");
        document.body.appendChild(div); //appendChild()插入节点
        oDiv.insertBefore(strong, span)//insertBeofre() strong放到span的前面
        var  a=  oDiv.removeChild(strong); // removeChild() 剪切节点，剪切后的节点文档中看不到，可以用变量存起来
        oDiv.remove();//删除节点