6. DOM节点

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

6-1 元素节点`getElementBy...`

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

6-2 属性节点 `getAttribute`

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

6-3 文本节点`innerText`

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

找节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        kerwin
        <p>111111</p>
        <!-- 我是注释 -->
    </div>
    <script>
        /*
           1. \n
        kerwin
        \n
          2.<p>111111</p>
         3. \n
            
         4. <!-- 我是注释 -->
         5. \n
        */
    </script>
</body>
</html>

6-4 获取节点

1 `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> 中间有一个换行和一堆空格，这个是第三个节点，是一个文本节点
这个时候就能看到我们有不同的节点类型了

2 `children` ：获取某一节点下所有的子一级元素节点

```html
<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
所以就只有一个，虽然只有一个，但是也是一个 伪数组

3 `firstChild`：获取某一节点下子一级的第一个节点

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

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

4 `firstElementChild`：获取某一节点下子一级第一个元素节点

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

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

5 `lastChild`：获取某一节点下子一级的最后一个节点

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

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

6 `lastElementChild`：获取某一节点下子一级最后一个元素节点

```html
<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>，是一个元素节点

7 `previousSibling`：获取某一个节点的上一个兄弟节点

```html
<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 标签之间的换行和空格，所以是一个文本节点

8 `previousElementSibling`：获取某一个节点的上一个元素节点

```html
<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，是一个元素节点

9 `nextSibling`：获取某一个节点的下一个兄弟节点

```html
<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 标签之间的换行和空格，所以是一个文本节点

10 `nextElementSibling`：获取某一个节点的下一个元素节点

```html
<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.nextElementSibling) // <li id="c">!!!</li>
  </script>
</body>
```

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

11 `parentNode`：获取某一个节点的父节点

```html
<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，是一个元素节点

12 `parentElement`：获取某一个节点的父元素节点

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

```html
<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 三个，所以就获取到了这三个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>hello</div>1111
    <div id="box" index="1">
        kerwin
        <p>111111</p>
        <p>22222</p>
        <!-- 我是注释 -->
    </div>

    <div>tiechui </div>
    <script>
        /*
           1. \n
        kerwin
        \n
          2.<p>111111</p>
         3. \n
            
         4. <!-- 我是注释 -->
         5. \n
        */
       // childNodes属性  vs children


       console.log(box.childNodes) //所有节点
       console.log(box.children) //所有元素

       // firstChild firstElementChild

    //    console.log(box.firstChild)
    //    console.log(box.firstElementChild)

       // lastChild lastElementChild

    //    console.log(box.lastChild)
    //    console.log(box.lastElementChild)


        // previousSibling previousElementSibling

        // console.log(box.previousSibling)
        // console.log(box.previousElementSibling)

        // box.previousElementSibling.innerHTML = "world"


        // nextSibling nextElementSibling

        // console.log(box.nextSibling)
        // console.log(box.nextElementSibling)

        // box.nextElementSibling.dataset.index=1

        // parentNode vs parentElement

        // console.log(box.parentNode.parentNode.parentNode)
        // console.log(box.parentElement.parentElement.parentElement)


        // console.log(box.getAttribute("index"))

        console.log(box.attributes[1])


        // vue  <div v-for=""> {{myhtml}}</div>
    </script>
</body>
</html>

7. 节点属性

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

先准备一段代码

<body>
  <ul test="我是 ul 的一个属性">
    <li>hello</li>
  </ul>

  <script>
    // 先获取 ul
    var oUl = document.querySelector('ul')
    
    // 获取到 ul 下的第一个子元素节点，是一个元素节点
    var eleNode = oUl.firstElementChild
    
    // 获取到 ul 的属性节点组合，因为是个组合，我们要拿到节点的话要用索引
    var attrNode = oUl.attributes[0]

    // 获取到 ul 下的第一个子节点，是一个文本节点
    var textNode = oUl.firstChild
  </script>
</body>

1.nodeType

nodeType：获取节点的节点类型，用数字表示
```
console.log(eleNode.nodeType) // 1
console.log(attrNode.nodeType) // 2
console.log(textNode.nodeType) // 3
```
- nodeType === 1 就表示该节点是一个 元素节点
- nodeType === 2 就表示该节点是一个 属性节点
- nodeType === 3 就表示该节点是一个 注释节点

2.nodeName

nodeName：获取节点的节点名称
```
console.log(eleNode.nodeName) // LI
console.log(attrNode.nodeName) // test
console.log(textNode.nodeName) // #text
```
- 元素节点的 nodeName 就是 大写标签名
- 属性节点的 nodeName 就是 属性名
- 文本节点的 nodeName 都是 #text

3.nodeValue

nodeValue：获取节点的值

console.log(eleNode.nodeValue) // null
console.log(attrNode.nodeValue) // 我是 ul 的一个属性
console.log(textNode.nodeValue) // 换行 + 空格

元素节点没有 nodeValue
属性节点的 nodeValue 就是 属性值
文本节点的 nodeValue 就是 文本内容

汇总

-	nodeType	nodeName	nodeValue
元素节点	1	大写标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容

8. 操作 DOM 节点

我们所说的操作无非就是 增删改查（CRUD）
创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）
向页面中增加一个节点
删除页面中的某一个节点
修改页面中的某一个节点
获取页面中的某一个节点

8-1 创建一个节点

`createElement`：用于创建一个元素节点

```javascript
// 创建一个 div 元素节点
var oDiv = document.createElement('div')

console.log(oDiv) // <div></div>
```

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

`createTextNode`：用于创建一个文本节点

```javascript
// 创建一个文本节点
var oText = document.createTextNode('我是一个文本')

console.log(oText) // "我是一个文本"
```

8-2 向页面中加入一个节点

`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>

`appendChild`：是向一个元素节点的末尾追加一个节点

语法： 父节点.appendChild(要插入的子节点)

// 创建一个 div 元素节点
var oDiv = document.createElement('div')
var oText = document.createTextNode('我是一个文本')

// 向 div 中追加一个文本节点
oDiv.appendChild(oText)

console.log(oDiv) // <div>我是一个文本</div>

8-3 删除页面中的某一个节点

`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`：删除自己以及后代

8-4 修改页面中的某一个节点

`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>

8-5 克隆节点()

false 不克隆后代（默认） true 克隆后代

        var oCloneBox = box.cloneNode(true)

        console.log(oCloneBox)

        oCloneBox.id="box2"
        document.body.appendChild(oCloneBox)

案例动态删除

  <body>
    <!-- <button>aaa</button> -->
    <ul id="list">

    </ul>
    <script>
        var arr = ["111","2222","333"]

        for(var i=0;i<arr.length;i++){
            var oli = document.createElement("li")
            oli.innerHTML = arr[i]

            var obutton = document.createElement("button")
            obutton.innerHTML = "delete"
            obutton.onclick = handler
            oli.appendChild(obutton)
            
            list.appendChild(oli)
        }

        function handler(){
            console.log(this.parentNode)
            this.parentNode.remove()
        }
    </script>
</body>
</html>

三. DOM节点6-8 （P88-P92）

6. DOM节点

6-1 元素节点getElementBy...

6-2 属性节点 getAttribute

6-3 文本节点innerText

6-4 获取节点

1 childNodes：获取某一个节点下 所有的子一级节点

2 children ：获取某一节点下所有的子一级 元素节点

3 firstChild：获取某一节点下子一级的 第一个节点

4 firstElementChild：获取某一节点下子一级 第一个元素节点

5 lastChild：获取某一节点下子一级的 最后一个节点

6 lastElementChild：获取某一节点下子一级 最后一个元素节点

7 previousSibling：获取某一个节点的 上一个兄弟节点

8 previousElementSibling：获取某一个节点的 上一个元素节点

9 nextSibling：获取某一个节点的 下一个兄弟节点

10 nextElementSibling：获取某一个节点的 下一个元素节点

11 parentNode：获取某一个节点的 父节点

12 parentElement：获取某一个节点的 父元素节点

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

7. 节点属性

1.nodeType

2.nodeName

3.nodeValue

汇总

8. 操作 DOM 节点

8-1 创建一个节点

createElement：用于创建一个元素节点

createTextNode：用于创建一个文本节点

8-2 向页面中加入一个节点

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

appendChild：是向一个元素节点的末尾追加一个节点

8-3 删除页面中的某一个节点

removeChild：移除某一节点下的某一个节点

remove：删除自己以及后代

8-4 修改页面中的某一个节点

replaceChild：将页面中的某一个节点替换掉

8-5 克隆节点()

6-1 元素节点`getElementBy...`

6-2 属性节点 `getAttribute`

6-3 文本节点`innerText`

1 `childNodes`：获取某一个节点下所有的子一级节点

2 `children` ：获取某一节点下所有的子一级元素节点

3 `firstChild`：获取某一节点下子一级的第一个节点

4 `firstElementChild`：获取某一节点下子一级第一个元素节点

5 `lastChild`：获取某一节点下子一级的最后一个节点

6 `lastElementChild`：获取某一节点下子一级最后一个元素节点

7 `previousSibling`：获取某一个节点的上一个兄弟节点

8 `previousElementSibling`：获取某一个节点的上一个元素节点

9 `nextSibling`：获取某一个节点的下一个兄弟节点

10 `nextElementSibling`：获取某一个节点的下一个元素节点

11 `parentNode`：获取某一个节点的父节点

12 `parentElement`：获取某一个节点的父元素节点

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

`createElement`：用于创建一个元素节点

`createTextNode`：用于创建一个文本节点

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

`appendChild`：是向一个元素节点的末尾追加一个节点

`removeChild`：移除某一节点下的某一个节点

`remove`：删除自己以及后代

`replaceChild`：将页面中的某一个节点替换掉