DOM操作 - 节点操作方式

小咪咪 2023-10-14 22:29 83阅读 0赞

DOM 树就是我们 html 结构中一个一个的节点构成的，不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点

**DOM节点**

节点：页面的所有组成部分成为节点

注意：标签是节点，但是节点并不一定是标签

DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点

分类：比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点），比如我们标签里面写的文字，那么就是文本节点，写在每一个标签上的属性，就是属性节点

#### **元素节点** ####

我们通过 getElementBy... 获取到的都是元素节点

#### **属性节点** ####

我们通过 getAttribute 获取的就是元素的属性节点

#### **文本节点** ####

我们通过 innerText 获取到的就是元素的文本节点

**获取节点**

**childNodes**  
作用：childNodes：获取某一个节点下 所有的子一级节点  
语法：元素对象.childNodes

<body>
      <div>
        <p>hello</p>
      </div>
      
      <script>
        // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
          var oDiv = document.querySelector('div')
        
        console.log(oDiv.childNodes) 
        /*
            NodeList(3) [text, p, text]
          0: text
          1: p
          2: text
          length: 3
          __proto__: NodeList
        */
      </script>
    </body>

我们会发现，拿到以后是一个伪数组，里面有三个节点

*  一个 text：从 <div> 一直到 <p>中间有一个换行和一堆空格，这个是第一个节点，是一个文本节点
 *  一个 p：这个 p 标签就是第二个节点，这个是一个元素节点
 *  一个 text：从 </p> 一直到 </div> 中间有一个换行和一堆空格，这个是第三个节点，是一个文本节点

这个时候就能看到我们有不同的节点类型了

#### **children** ####

作用：children ：获取某一节点下所有的子一级 元素节点  
语法：元素对象.children

<body>
      <div>
        <p>hello</p>
      </div>
      
      <script>
        // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
          var oDiv = document.querySelector('div')
        
        console.log(oDiv.children) 
        /*
            HTMLCollection [p]
          0: p
          length: 1
          __proto__: HTMLCollection
        */
      </script>
    </body>

我们发现只有一个节点了，因为 children 只要元素节点，div 下面又只有一个元素节点，就是 p，所以就只有一个，虽然只有一个，但是也是一个 伪数组

#### **firstChild** ####

作用：firstChild：获取某一节点下子一级的 第一个节点  
语法：元素对象.firstChild

<body>
      <div>
        <p>hello</p>
      </div>
      
      <script>
        // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
          var oDiv = document.querySelector('div')
        
        console.log(oDiv.firstChild) // #text 
      </script>
    </body>

这个是只获取一个节点，不再是伪数组了，获取的是第一个，第一个就是 <div> 一直到 <p> 的那个换行和空格，是个文本节点。

#### **lastChild** ####

作用：lastChild：获取某一节点下子一级的 最后一个节点  
语法：元素对象.lastChild

<body>
      <div>
        <p>hello</p>
      </div>
      
      <script>
        // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
       var oDiv = document.querySelector('div')
        
        console.log(oDiv.lastChild) // #text 
      </script>
    </body>

只获取一个节点，不再是伪数组，获取的是最后一个，最后一个就是 </p> 一直到 </div> 之间的换行和空格，是个文本节点。

#### **firstElementChild** ####

作用：firstElementChild：获取某一节点下子一级 第一个元素节点  
语法：元素对象.firstElementChild

<body>
      <div>
        <p>hello</p>
      </div>
      
      <script>
        // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
       var oDiv = document.querySelector('div')
        
        console.log(oDiv.firstElementChild) // <p>hello</p>
      </script>
    </body>

只获取一个节点，不在是伪数组，获取的是第一个 元素节点，第一个元素节点就是 p 标签，是一个元素节点。

#### **lastElementChild** ####

作用：lastElementChild：获取某一节点下子一级 最后一个元素节点  
语法：元素对象.lastElementChild

<body>
      <div>
        <p>hello</p>
        <p>world</p>
      </div>
      
      <script>
        // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点
       var oDiv = document.querySelector('div')
        
        console.log(oDiv.lastElementChild) // <p>world</p>
      </script>
    </body>

只获取一个节点，不在是伪数组，获取的是最后一个 元素节点，最后一个元素节点是<p>world<p>，是一个元素节点。

#### **nextSibling** ####

作用：nextSibling：获取某一个节点的 下一个兄弟节点  
语法：元素对象.nextSibling

<body>
      <ul>
        <li id="a">hello</li>
        <li id="b">world</li>
        <li id="c">!!!</li>
      </ul>
      
      <script>
        // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
       var oLi = document.querySelector('#b')
        
        console.log(oLi.nextSibling) // #text
      </script>
    </body>

只获取一个节点，不在是伪数组，获取的是 id="b" 这个 li 的下一个兄弟节点，因为 id="b" 的下一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

#### **previousSibling** ####

作用：previousSibling：获取某一个节点的 上一个兄弟节点  
语法：元素对象.previousSibling

<body>
      <ul>
        <li id="a">hello</li>
        <li id="b">world</li>
        <li id="c">!!!</li>
      </ul>
      
      <script>
        // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
       var oLi = document.querySelector('#b')
        
        console.log(oLi.previousSibling) // #text
      </script>
    </body>

只获取一个节点，不在是伪数组，获取的是 id="b" 这个 li 的上一个兄弟节点，因为 id="b" 的上一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

#### **nextElementSibling** ####

作用：nextElementSibling：获取某一个节点的 下一个元素节点  
语法：元素对象.nextElementSibling

只获取一个节点，不在是伪数组，获取的是 id="b" 这个 li 的下一个兄弟元素节点，因为 id="b" 的下一个兄弟元素节点就是 id="c" 的 li，是一个元素节点。

#### **previousElementSibling** ####

作用：previousElementSibling：获取某一个节点的 上一个元素节点  
语法：元素对象.previousElementSibling

<body>
      <ul>
        <li id="a">hello</li>
        <li id="b">world</li>
        <li id="c">!!!</li>
      </ul>
      
      <script>
        // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
       var oLi = document.querySelector('#b')
        
        console.log(oLi.previousElementSibling) // <li id="a">hello</li>
      </script>
    </body>

只获取一个节点，不在是伪数组，获取的是 id="b" 这个 li 的上一个兄弟元素节点，因为 id="b" 的上一个兄弟元素节点就是 id="a" 的 li，是一个元素节点。

#### **parentNode** ####

作用：parentNode：获取某一个节点的 父节点  
语法：元素对象.parentNode

<body>
      <ul>
        <li id="a">hello</li>
        <li id="b">world</li>
        <li id="c">!!!</li>
      </ul>
      
      <script>
        // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
       var oLi = document.querySelector('#b')
        
        console.log(oLi.parentNode) // <ul>...</ul>
      </script>
    </body>

只获取一个节点，不在是伪数组，获取的是当前这个 li 的父元素节点，因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点

#### **parentElement** ####

作用：parentElement获取某一节点的父元素节点  
语法：元素对象.parentElement

<body>
      <ul>
        <li id="a">hello</li>
        <li id="b">world</li>
        <li id="c">!!!</li>
      </ul>
      
      <script>
        // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
       var oLi = document.querySelector('#b')
        
        console.log(oLi.parentNode) // <ul>...</ul>
      </script>
    </body>

只获取一个节点，不在是伪数组，获取的是当前这个 li 的父元素节点，因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点。

#### **attributes** ####

作用：attributes：获取某一个 元素节点 的所有 属性节点

<body>
      <ul>
        <li id="a" a="100" test="test">hello</li>
      </ul>
      
      <script>
        // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点
       var oLi = document.querySelector('#a')
        
        console.log(oLi.attributes) 
        /*
         NamedNodeMap {0: id, 1: a, 2: test, id: id, a: a, test: test, length: 3}
          0: id
          1: a
          2: test
          length: 3
          a: a
          id: id
          test: test
          __proto__: NamedNodeMap
        
        */
      </script>
    </body>

获取的是一组数据，是该元素的所有属性，也是一个伪数组，这个 li 有三个属性，id / a / test 三个，所以就获取到了这三个

![图片][640_wx_fmt_png_tp_wxpic_wxfrom_5_wx_lazy_1_wx_co_1]

**节点属性**

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

*  nodeType
 *  nodeName
 *  nodeValue

我们已经知道节点会分成很多种，而且我们也能获取到各种不同的节点，接下来我们就来聊一些各种节点之间属性的区别，我们先准备一段代码。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
    
        <div class="box">
            hello
            world
            
        </div>
    
        <script>
            // 0. 拿到四种节点
            var ele = document.querySelector('div')
            var attr = ele.attributes[0]
            var text = ele.firstChild
            var comment = ele.childNodes[1]
    
            console.log('元素节点 : ', ele)
            console.log('属性节点 : ', attr)
            console.log('文本节点 : ', text)
            console.log('注释节点 : ', comment)
        </script>
    </body>
    
    </html>

**nodeType**

nodeType：获取节点的节点类型，用数字表示

console.log('元素节点 : ', ele.nodeType) // 1
    console.log('属性节点 : ', attr.nodeType) // 2 
    console.log('文本节点 : ', text.nodeType) // 3
    console.log('注释节点 : ', comment.nodeType) // 8

nodeType === 1 就表示该节点是一个 **元素节点**

nodeType === 2 就表示该节点是一个 **属性节点**  
nodeType === 3 就表示该节点是一个 **文本节点**  
nodeType === 8 就表示该节点是一个 **注释节点**

#### **nodeName** ####

nodeName：获取节点的节点名称

console.log('元素节点 : ', ele.nodeName) // DIV
    console.log('属性节点 : ', attr.nodeName) // class
    console.log('文本节点 : ', text.nodeName) // #text
    console.log('注释节点 : ', comment.nodeName) // #comment

元素节点的 nodeName 就是 **大写标签名**

属性节点的 nodeName 就是 **属性名**  
文本节点的 nodeName 都是 **\#text**  
文本节点的 nodeName 都是 **\#comment**

#### **nodeValue** ####

nodeValue： 获取节点的值

console.log('元素节点 : ', ele.nodeValue) // null 
    console.log('属性节点 : ', attr.nodeValue) // box
    console.log('文本节点 : ', text.nodeValue) // hello world
    console.log('注释节点 : ', comment.nodeValue) // 你好 世界

元素节点没有 nodeValue返回的是**null**

属性节点的 nodeValue 就是 **属性值**  
文本节点的 nodeValue 就是 **文本内容**  
文本节点的 nodeValue 就是 **注释内**

**操作DOM节点**

我们所说的操作无非就是 增删改查（CRUD）

*  创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）
 *  向页面中增加一个节点
 *  删除页面中的某一个节点
 *  修改页面中的某一个节点
 *  获取页面中的某一个节点

**创建一个节点**  
**createElement：用于创建一个元素节点**  
语法：document.createElement('要创建的标签')  
要创建的标签可以是W3C规范内的标签，也可以的自定义标签

// 创建一个 div 元素节点
    var oDiv = document.createElement('div')
    console.log(oDiv) // <div></div>
    
    //创建一个自定义元素节点
    var newName = document.createElement('hello')
    console.log(newName); //<hello></hello>

创建出来的就是一个可以使用的 div 元素

**createTextNode：用于创建一个文本节点**  
语法：document.createTextNode('要写的文本内容')  
返回值：就是一个文本节点, 不是字符串

// 创建一个文本节点
    var oText = document.createTextNode('我是一个文本')
    
    console.log(oText) // "我是一个文本"
    
    console.log(typeof oText);//object

**插入一个节点**

**appendChild：是向一个元素节点的末尾追加一个节点**  
语法： 父节点.appendChild(要插入的子节点)

// 创建一个 div 元素节点
    var oDiv = document.createElement('div')
    var oText = document.createTextNode('我是一个文本')
    
    // 向 div 中追加一个文本节点
    oDiv.appendChild(oText)
    
    console.log(oDiv) // <div>我是一个文本</div>

**insertBefore：向某一个节点前插入一个节点**

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

<body>
      <div>
        <p>我是一个 p 标签</p>
      </div>
      
      <script>
       var oDiv = document.querySelector('div')
        var oP = oDiv.querySelector('p')
        
        // 创建一个元素节点
        var oSpan = document.createElement('span')
        
        // 将这个元素节点添加到 div 下的 p 的前面
        oDiv.insertBefore(oSpan, oP)
        
        console.log(oDiv)
        /*
         <div>
          <span></span>
          <p>我是一个 p 标签</p>
         </div>
        */
      </script>
    </body>

**删除一个节点**

**removeChild**  
removeChild：移除某一节点下的某一个节点  
语法：父节点.removeChild(要移除的子节点)

<body>
      <div>
        <p>我是一个 p 标签</p>
      </div>
      
      <script>
       var oDiv = document.querySelector('div')
        var oP = oDiv.querySelector('p')
        
        // 移除 div 下面的 p 标签
        oDiv.removeChild(oP)
        
        console.log(oDiv) // <div></div>
      </script>
    </body>

**remove**

remove：移除某个节点，那个节点要移除直接调用这个方法  
语法：元素节点.remove('要移除的节点')

<body>
    
        <body>
            <div>
                <p>我是一个 p 标签</p>
            </div>
    
            <script>
                var oDiv = document.querySelector('div')
                var oP = oDiv.querySelector('p')
    
                // 移除 div 下面的 p 标签
                var deOp = oP.remove()
                
                console.log(oDiv) // <div></div>
            </script>
        </body>

**替换一个节点**

replaceChild：将页面中的某一个节点替换掉  
语法： 父节点.replaceChild(新节点，旧节点)

<body>
      <div>
        <p>我是一个 p 标签</p>
      </div>
      
      <script>
       var oDiv = document.querySelector('div')
        var oP = oDiv.querySelector('p')
        
        // 创建一个 span 节点
        var oSpan = document.createElement('span')
        // 向 span 元素中加点文字
        oSpan.innerHTML = '我是新创建的 span 标签'
        
        // 用创建的 span 标签替换原先 div 下的 p 标签
        oDiv.replaceChild(oSpan, oP)
        
        console.log(oDiv)
        /*
         <div>
          <span>我是新创建的 span 标签</span>
         </div>
        */
      </script>
    </body>

**克隆一个节点**

cloneNode()把已经存在的节点一模一样的复制一份  
语法：节点对象.cloneNode(参数)

*  参数是一个布尔值true或者false,不写就是默认的参数是false
 *  false代表只克隆本身的标签，标签里面的所有节点不可隆，也就的不可隆后代节点
 *  true代表全部可隆，本身节点以及所有的后代节点

返回值：就的克隆好的一个新节点

<body>
        <div class="box" id="box">
            <span>div 内部的  span 标签</span>
        </div>
    
        <script>
            // 获取元素
            var div = document.querySelector('div')
    
            // 不带参数  不克隆后代节点, 只克隆 div 本身
            var cloneDiv = div.cloneNode()
    
            // 带参数  连带后代节点一起克隆
            var cloneDiv1 = div.cloneNode(true)
            console.log(div)
            console.log(cloneDiv)
            console.log(cloneDiv1);
        </script>
    </body>

[640_wx_fmt_png_tp_wxpic_wxfrom_5_wx_lazy_1_wx_co_1]: https://mmbiz.qpic.cn/mmbiz_png/mT8jEiaF5Se3QQyRNlsejHo16Km3vYuJYVbgViamIrPHm8gU35P0WQibIoun5QCZ95iaUZUXGx62lwz8KiaysS8yysw/640?wx_fmt=png&tp=wxpic&wxfrom=5&wx_lazy=1&wx_co=1