节点操作

1. DOM 节点

DOM 树里的每一个内容都称之为节点

节点类型：

元素节点：所有的标签，例如 html （根节点）、div、a 等；
属性节点：所有的属性，例如 class 、href 等；
文本节点：所有的文本
其它

2. 查找节点

可以根据节点关系查找目标节点：

（1）父节点查找

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

实例：关闭二维码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS 事件</title>
    <style>
      .code {
        position: relative;
        margin: 50px auto;
        width: 800px;
      }
      img {
        position: absolute;
        width: 430px;
        height: 435px;
        border: 1px solid #000;
        margin-left: 10px;
      }
      .display {
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="code">
      <button>X</button>
      <img src="./code.png" alt="" />
    </div>

    <script>
      let btn = document.querySelector('button')

      btn.addEventListener('click', () => {
        console.log(btn.parentNode)
        btn.parentNode.classList.add('display')
      })
    </script>
  </body>
</html>

分析：

点击关闭按钮，关闭的是二维码的父盒子，还要获取 code
关闭按钮和 code 是父子关系
所以我们可以点击关闭按钮的时候，直接关闭它的父元素，这样就不用获取 code 元素了

多个二维码关闭实例

需求：多个二维码，点击谁，就关闭谁

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS 事件</title>
    <style>
      body {
        display: flex;
        justify-content: space-evenly;
      }
      .code {
        position: relative;
        margin: 50px auto;
        width: 400px;
      }
      img {
        position: absolute;
        width: 230px;
        height: 235px;
        border: 1px solid #000;
        margin-left: 10px;
      }
      .display {
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="code">
      <button>X</button>
      <img src="./code.png" alt="" />
    </div>
    <div class="code">
      <button>X</button>
      <img src="./code.png" alt="" />
    </div>
    <div class="code">
      <button>X</button>
      <img src="./code.png" alt="" />
    </div>

    <script>
      let btns = document.querySelectorAll('button')

      for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', () => {
          btns[i].parentNode.classList.add('display')
        })
      }
    </script>
  </body>
</html>

隐藏 - 保留元素位置

（2）子节点查找

childNodes 属性：获得所有的子节点，包括文本节点（空格、换行）、注释节点等

children 属性：仅获得所有元素节点，返回的还是一个 伪数组

（3）兄弟关系查找

nextElementSibling 属性：查找 下一个 兄弟节点

previousElementSibling 属性：查找 上一个 兄弟节点

3. 增加节点

很多情况下，我们需要在页面中增加元素，比如：点击按钮时，新增一条消息

一般情况下，需要先创建一个新的节点，再把创建的新节点放到指定的元素内部

创建节点 即创造出一个新的网页元素，再添加到网页内，一般是先创建节点，然后插入节点

创建元素节点：

追加节点 ：要想在界面中看到创建的元素，就需要将其插入到某个父元素中

插入到父元素的最后一个子元素：

实例1：将新创建的元素加入到父元素的子元素最后

  <body>
    <div class="box">
      <p>1</p>
      <p>2</p>
    </div>

    <script>
      // 获取父元素
      let div = document.querySelector('.box')
      // 创建新元素
      let a = document.createElement('a')
      // 添加文本
      a.innerHTML = '超链接'
      // 加入父元素的最后面
      div.appendChild(a)
    </script>
  </body>

插入到父元素中，某个子元素的前面：

实例2：将新创建的元素加入到父元素的第二个子元素的前面

  <body>
    <div class="box">
      <p>1</p>
      <p>2</p>
    </div>

    <script>
      // 获取元素
      let div = document.querySelector('.box')
      let p = document.querySelector('.box p:nth-child(2)')

      // 创建新元素
      let a = document.createElement('a')

      // 添加文本
      a.innerHTML = '新添加的超链接'

      // 加入指定元素的前面
      div.insertBefore(a, p)
    </script>
  </body>

也可写成如下形式：

特殊情况下，我们新增节点可以复制一个原有的节点，再把复制的节点放入指定的元素内部即可，这一方式称为 克隆节点（克隆一个已有的元素节点）

cloneNode() 会克隆出一个跟原标签一样的元素，括号内传入布尔值：

若为 true ，则代表克隆时会 包含后代节点 一起克隆；
若为 false ，则代表克隆时 不包含后代节点 ；
默认为 false

实例1：包含后代节点

  <body>
    <div class="box">
      <ul>
        <li class="first">1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>

    <script>
      // 获取元素
      let ul = document.querySelector('.box ul')
      console.log(ul.cloneNode(true))
    </script>
  </body>

实例2：不包含后代节点

  <body>
    <div class="box">
      <ul>
        <li class="first">1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>

    <script>
      // 获取元素
      let ul = document.querySelector('.box ul')
      console.log(ul.cloneNode())
    </script>
  </body>

4. 删除节点

若一个节点在页面中不需要时，可以删除它，在 JS 原生 DOM 操作中，要删除元素必须通过 父元素删除 ，如果不存在父子关系，则删除不成功；

删除节点和隐藏节点是有区别的：隐藏节点（display:none）节点还是存在的；但删除节点，是从 html 根节点中删除

实例1：删除元素节点

  <body>
    <div class="box">
      <ul>
        <li class="first">1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>

    <script>
      // 获取元素
      let ul = document.querySelector('.box ul')
      ul.removeChild(ul.children[0])
    </script>
  </body>

实例2：隐藏元素节点

  <body>
    <div class="box">
      <ul>
        <li class="first">1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>

    <script>
      // 获取元素
      let ul = document.querySelector('.box ul')
      ul.children[0].style.display = 'none'
    </script>
  </body>

3. DOM 节点操作（1） - 节点的增删改查及其实例