DOM（深入节点操作）

最新推荐文章于 2023-09-05 09:26:32 发布

星灭233

最新推荐文章于 2023-09-05 09:26:32 发布

阅读量242

点赞数

分类专栏： DOM 知识总结文章标签： dom js javascript

本文链接：https://blog.csdn.net/ksx2333/article/details/115359652

版权

知识总结同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

DOM

5 篇文章 0 订阅

订阅专栏

文章目录

前言

1 了解DOM节点

在学习CSS时，可以把上面的每一个标签看成一个盒子。
在学习DOM时，可以把上面的每一个标签看成一个节点（DOM节点，DOM元素，DOM对象）。
页面中的每一个部分，都是节点。
在这里插入图片描述

        1）document 一个页面中最大的节点，只能有一个，承载所有节点的容器。根节点。不是元素节点
        2）html 最大的元素节点，html节点中又包含了很多的节点。
        3）其它的元素节点：
            head / body / div / ul / table / input .... 
        4）文本节点：
            一个标签中可以包含一个文本，这个文本叫文本节点，包含换行和空格。
            文本节点，一般也是元素节点的子节点。
        5）属性节点：
            属性节点不能单独存在，必须依赖元素节点，要得到属性节点，先得到元素节点。
            DOM树，在DOM树上，是没有属性节点，DOM树上有很多的节点，我们只需要掌握元素节点和文本节点
        6）注释节点
            作为一个独立的点的出现的，为说明使用。
        ....

节点的操作：
不只要操作元素节点，还要操作文本节点，属性节点，注释节点…
操作：CRUD

    对元素节点的操作：
        1）获取：
            昨天讲了9种方式，还有一种是通过节点关系来获取节点
        2）创建节点：
            通过JS中的一个api就可以创建元素节点
                createElement()  
                createTextNode()
                createComment() 
                createAttribute()
        3）插入节点
            当我们创建出一个节点后，这个节点并没有出现在DOM树上，我们需要手动插入到DOM树上
                appendChild()
                insertBefore()
        4）删除节点  把某个节点，从DOM树上移除掉
            removeChild()  
            remove()
        5）替换节点
            replaceChild()
        6）克隆节点
            把一个已经存在的节点，复制一份一模一样的
            cloneNode(参数)  
            如果参数是true，表示深clone
            如果参数是false，表示浅clone

2 通过节点关系获取节点

     <p>我是div上面的p标签</p>
     <div id="box" class="abc" index="hello world~">
        hello 
        <p>你好</p>
        world
        <p>世界</p>
        <!-- 我是一段注释 -->
     </div>
     <p>我是div下面的p标签</p>

    问：当前div元素内部有多个子（儿子）节点？
    1）文本节点：（1个换行，四个空格，一个hello，一个换行，四个空格）
    2）元素节点（p标签）
    3）文本节点：（1个换行，四个空格，一个world，一个换行，四个空格）
    4）元素节点（p标签）
    5）文本节点：（1个换行，四个空格）
    6） 注释节点
    7）文本节点：（1个换行）

2.1 childNodes 得到所有的子节点是一个伪数组

        let div = document.querySelector("div")
        console.log(div.childNodes);

2.2 children 得到所有元素节点

       console.log(div.children);

2.3 firstChild 得到第一个子节点

       console.log(div.firstChild);

2.4 firstElementChild 得到第一个元素节点

       console.log(div.firstElementChild);

2.5 lastChild 得到最后一个子节点

       console.log(div.lastChild);

2.6 lastElementChild 得到最后一个元素节点

       console.log(div.lastElementChild);

2.7 proviousSibling 得到上一个兄弟节点（哥哥节点）

       console.log(div.previousSibling);

2.8 proviousElementSibling 得到上一个兄弟元素节点（哥哥元素节点）

       console.log(div.previousElementSibling);

2.9 nextSibling 得到下一个兄弟节点（弟弟节点）

       console.log(div.nextSibling);

2.10 nextElementSibling 得到下一个兄弟元素节点（弟弟元素节点）

       console.log(div.nextElementSibling);

2.11 parentNode 得到父节点，得到的都是元素节点特别需要注释 document

        console.log(div.parentNode);

2.12 parentElement 得到父元素节点

       console.log(div.parentElement);

2.13 attributes 得到元素的所有属性节点

       console.log(div.attributes);

3 节点的特征

（为下面准备）body内容：

     <div id="box" class="container">
         <!-- 你好 世界 -->
         hello
     </div>

3.1 nodeType 就是一个编号

nodeType 属性返回以数字值返回指定节点的节点类型。

            以数字的形式来表示一个节点的类型
            元素节点：1
            属性节点：2
            文本节点：3
            注释节点：8

使用方式：

        var div = document.querySelector("div");
        // 元素节点
        console.log(div);
        console.log(div.nodeType);//输出1
        
        // 属性节点
        let attr = div.attributes[0]
        console.log(attr);
        console.log(attr.nodeType);//输出2
        
        // 文本节点
        let text = div.childNodes[2]
        console.log(text);
        console.log(text.nodeType);//输出3
        
        // 注释节点
        let comment = div.childNodes[1]
        console.log(comment);
        console.log(comment.nodeType);//输出8

3.2 nodeName

nodeName 属性指定节点的节点名称。

            节点的名字  标签全大写  DIV   #text  #comment
            元素节点，则 nodeName 属性返回标签名。
            属性节点，则 nodeName 属性返回属性的名称。（如果id写前面返回id 谁写前面返回谁）
            其他节点类型，nodeName 属性返回不同节点类型的不同名称。

        console.log(div.nodeName);
        let attr = div.attributes[0]
        console.log(attr.nodeName);//返回div上面的属性节点排序0的名称

3.3 nodeValue

nodeValue 属性设置或返回指定节点的节点值。

            节点的值   
            元素节点的值：null
            属性节点的值：对应的属性值（id/style/class等等的值）
            文本节点的值：文本内容  包含换行和空格 
            注释节点的值：注释内容 包含换行 和 空格

        console.log(div.nodeValue);
        let attr = div.attributes[0]
        console.log(attr.nodeName);//返回div上面的属性节点排序0的值

4 创建节点

通过JS中的一个api就可以创建元素节点

4.1 createElement() 创建元素节点

    // createElement()    创建元素节点
    let div = document.createElement("div")
    console.log(div);

4.2 createTextNode() 创建文本节点

    // createTextNode()  创建文本节点
    let text = document.createTextNode("hello world")
    console.log(text);

4.3 createComment() 创建注释节点

    // createComment()    创建注释节点
    let comment = document.createComment("我是一个注释")
    console.log(comment);

4.4 createAttribute() 创建属性节点

    // createAttribute()   创建属性节点
    let attr = document.createAttribute("id")
    attr.value = "box"
    console.log(attr);

5 插入节点

当我们创建出一个节点后，这个节点并没有出现在DOM树上，我们需要手动插入到DOM树上

5.1 appendChild()

父节点.appendChild(子节点) 把一个子点插入到一个父节点的最后面的

     <div class="box">
         <p>我是div里面的p标签</p>
     </div>

        let div = document.querySelector("div")
        let p = document.querySelector("p")
        // 创建一个span节点
        let span = document.createElement("span")
        span.innerHTML = "我是新来的span节点"

        // 再创建一个节点
        let h1 = document.createElement("h1")
        // 把span节点插入到box节点里面
        // div.appendChild(span)

        // 把span标签插入到h1中，把h1插入到box中
        // h1.appendChild(span)
        // div.appendChild(h1)
        
        // 把span标签插入到h1中
        h1.appendChild(span)

5.2 insertBefore()

父节点.insertBefore(要插入的节点，哪一个节点的前面)

        //把h1插入到p标签前面
        div.insertBefore(h1,p)

6 删除节点

删除节点把某个节点，从DOM树上移除掉

     <div>
         <p>我是div里面的p标签</p>
     </div>
     <button id="btn">删除点击</button>

6.1 removeChild()

父节点.removeChild(子节点) 把子节点从父节点中删除掉

    <script>
        let div = document.querySelector("div")
        let p = document.querySelector("p")
        // 把p标签从div里面删除掉
        // div.removeChild(p)
        // p.remove()
        // div.remove(); // 把div从body中移除掉
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            p.remove()
        }
    </script>

6.2 remove()

节点.remove() 把自己移出父节点

    <script>
        let div = document.querySelector("div")
        let p = document.querySelector("p")
        // div.remove(); // 把div从body中移除掉
        var btn = document.getElementById("btn");
        btn.onclick = function () {
        // 把p标签从div里面删除掉
        div.removeChild(p)
        }
    </script>

7 替换节点（ replaceChild()）

replaceChild()
父节点.replaceChild(新节点，旧节点)

     <div>
        <p>我是div里面的p标签</p>
    </div>
    <script>
        let div = document.querySelector("div")
        // let p = document.querySelector("p")

        // 创建一个span标签
        let span = document.createElement("span")
        span.innerHTML = "我是新来的span标签"

        // div.replaceChild(span,p)
        div.replaceChild(span,div.firstElementChild)
    </script>

8 克隆节点（cloneNode(true)）

        把一个已经存在的节点，复制一份一模一样的
        cloneNode(参数)  
        如果参数是true，表示深clone
        如果参数是false，表示浅clone

          <button id="btn">按钮</button>
     <div class="box" id="box">
    <p>23333</p>
     </div>
    <script>
        var div = document.querySelector("div")
        // document.body.appendChild(cloneDiv)
        var btn=document.getElementById("btn")
        btn.onclick=function(){
            var cloneDiv = div.cloneNode(true);//每次赋值新空间，才不会产生覆盖
            console.log(cloneDiv);
            document.body.appendChild(cloneDiv);
        }
    </script>