DOM节点操作（节点的增删改查）一 DOM节点 DOM节点：DOM树里面的每一个内容都是节点节点类型二查找节点节

一 DOM节点

DOM节点：DOM树里面的每一个内容都是节点

节点类型

1.元素节点（比较重要）

2.属性节点

3.文本节点

4.其他

二查找节点

节点关系

1.父节点

parentNode属性
返回最近一级的父节点，找不到返回null

 子元素.parentNode

关闭多个二维码小案例

   <!DOCTYPE html>
    <html lang="en">

    <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关闭二维码</title>
<style>
    div {
        width: 300px;
        height: 500px;
        margin: 100px auto;
        position: relative;
        background-color: aqua;
    }
    
    img {
        width: 100%;
        height: 100%;
    }
    
    span {
        position: absolute;
        font-size: 30px;
    }
</style>
      </head>

     <body>
<div class="wrap">
    <img src="../img/ouwenvx.jpg" alt="">
    <span class="dianji">x</span>
</div>
<div class="wrap">
    <img src="../img/ouwenvx.jpg" alt="">
    <span class="dianji">x</span>
</div>
<div class="wrap">
    <img src="../img/ouwenvx.jpg" alt="">
    <span class="dianji">x</span>
</div>
<div class="wrap">
    <img src="../img/ouwenvx.jpg" alt="">
    <span class="dianji">x</span>
</div>
<div class="wrap">
    <img src="../img/ouwenvx.jpg" alt="">
    <span class="dianji">x</span>
</div>
<div class="wrap">
    <img src="../img/ouwenvx.jpg" alt="">
    <span class="dianji">x</span>
</div>

     </body>
       <script>
// 获取元素 关闭按钮
let dianji = document.querySelectorAll('.dianji')
    // 绑个多个点击事件
for (let i = 0; i < dianji.length; i++) {
    dianji[i].addEventListener('click', function() {
        alert(11)
        this.parentNode.style.display = 'none'
    })
}
       </script>

      </html>

2.子节点

-childNodes

获取所欲子节点包括文本节点（空格换行）注释节点等

-children

仅获得所有元素节点
返回的还是一个伪数组
```
父元素.children
```

3.兄弟节点

下一个兄弟节点
```
       nextElementSibling属性
```
上一个兄弟节点
```
     previousEliemmentSlibing属性
```

三增加节点（追加节点）

创建一个新的元素节点
```
document.createElement('标签名')
```

2.追加节点(后面追加)

    父元素.appendChild（子元素）

3.插入父元素中某个子元素前面

 父元素.insertBefore(要插入的元素，在那哪个元素前面放入)

4.复制一个节点放入指定的元素内部克隆节点

   元素.cloneNode(布尔值)

为true则代表克隆是会包含后代元素节点一起克隆
为false则代表克隆时不包含后代节点
默认false

四删除节点

通过父元素删除

父元素.removeChild(要删除的元素)

如果不存在父子关系删除不成功
删除节点和隐藏节点有区别的
隐藏节点是还存在的但是删除是从html中删除节点