04-DOM节点父节点查找，子节点查找，兄弟节点查找，增加节点，克隆节点和删除节点什么是DOM 节点？DOM节点的分类？

DOM节点

DOM节点
- DOM树里每一个内容都称之为节点
节点类型
- 元素节点
  - 所有的标签比如 body、 div
  - html 是根节点
- 属性节点
  - 所有的属性比如 href
- 文本节点
  - 所有的文本

什么是DOM 节点？
- DOM树里每一个内容都称之为节点
DOM节点的分类？
- 元素节点比如 div标签
- 属性节点比如 class属性
- 文本节点比如标签里面的文字
我们重点记住那个节点？
- 元素节点
- 可以更好的让我们理清标签元素之间的关系

查找节点

父节点查找

parentNode 属性
返回最近一级的父节点找不到返回为null
```
子元素.parentNode
```

    <div class="father">
        <div class="son">儿子</div>
    </div>
    <script>
        let son = document.querySelector('.son')
        son.parentNode.style.display = 'none'
    </script>

关闭二维码案例

<div class="box">
    <i class="close">关闭</i>
</div>
<script>
    let close = document.querySelector('.close')
    close.addEventListener('click',function(){
        close.parentNode.style.display = 'none'
    })
</script>

关闭多个二维码案例

<div class="box">
    <i class="close">关闭</i>
</div>
<div class="box">
    <i class="close">关闭</i>
</div>
<div class="box">
    <i class="close">关闭</i>
</div>
<div class="box">
    <i class="close">关闭</i>
</div>
<script>
    // 获取元素 关闭按钮
    let close_btn = document.querySelectorAll('.close')
    // 绑定多个事件给close
    for(let i = 0;i < close_btn.length; i++){
    close_btn[i].addEventListener('click',function(){
        // 关闭当前二维码 点击谁就关闭谁的爸爸
        this.parentNode.style.display = 'none'
        //或者使用 visibility 隐藏后依旧占位置
        this.parentNode.style.visibility = 'hidden'
    })
}
</script>

子节点查找

childNodes
- 获得所有子节点、包括文本节点（空格、换行）、注释节点等
children （重点）
- 仅获得所有元素节点
- 返回的还是一个伪数组
- ```
父元素.children
```

<button>点击</button>
    <ul>
        <li>哈哈哈</li>
        <li>哈哈哈</li>
        <li>哈哈哈</li>
        <li>哈哈哈</li>
    </ul>
    <script>
        let btn = document.querySelector('button')
        let ul = document.querySelector('ul')
        btn.addEventListener('click',function(){
        for(let i = 0; i < ul.children.length; i++){
            ul.children[i].style.color = 'red'
        }
    })
    </script>

兄弟节点查找

下一个兄弟节点
- nextElementSibling 属性
上一个兄弟节点
- previousElementSibling 属性

    <button>点击</button>
    <ul>
        <li>第1个</li>
        <li class="two">第2个</li>
        <li>第3个</li>
        <li>第4个</li>
    </ul>
    <script>
        let btn = document.querySelector('button')
        let two = document.querySelector('.two')
        btn.addEventListener('click',function(){
            two.nextElementSibling.style.color = 'red'
            two.previousElementSibling.style.color = 'pink'
        })
    </script>

增加节点

创建节点（即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点）
- 创建元素节点方法：
- ```
document.createElement('标签名')
```
追加节点
- 要想在界面看到，还得插入到某个父元素中
- 插入到父元素的最后一个子元素:
- ```
父元素.appendChild(要插入的元素)
```
- 插入到父元素中某个子元素的前面
- ```
父元素.insertBefore(要插入的元素，在哪个元素前面)
```

<ul>
        <li>第一个</li>
        <li>第一个</li>
    </ul>
    <script>
        let ul = document.querySelector('ul')
        let li = document.createElement('li')
        li.innerHTML = '最新'
        ul.insertBefore(li,ul.children[0])
    </script>

克隆和删除节点

克隆节点
- ```
元素.cloneNode(布尔值)
```
- cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
  - 若为true，则代表克隆时会包含后代节点一起克隆
  - 若为false，则代表克隆时不包含后代节点
  - 默认为false

    <ul>
        <li>11111</li>
    </ul>
    <script>
        let ul = document.querySelector('ul')
        let newUl = ul.cloneNode(true)
        ul.appendChild(newUl)
    </script>

删除节点
- ```
父元素.removeChild(要删除的元素)
```
- 如果不存在父子关系则删除不成功
- 删除节点和隐藏节点（display:none）是有区别的:隐藏节点还是存在的，但是删除，则从html中删除节点

    <button>点击删除</button>
    <ul>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
    </ul>
    <script>
        let btn = document.querySelector('button')
        let ul = document.querySelector('ul')
        btn.addEventListener('click',function(){
            ul.removeChild(ul.children[0])
        })
    </script>