一.节点

1.元素节点

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

2.获取节点

2.1子找父

parentNode可以查找到当前节点的最近一级的父节点

如果找到则返回一个dom元素，找不到则返回null

<div class="box">
      <p>我是p元素</p>
    </div>

    <script>
      let p = document.querySelector('p')
      let box = document.querySelector('.box')
      // parentNode：获取当前节点的最近的上一级--父节点
      console.log(p.parentNode)   // <div class="box">...</div>
      console.log(box.parentNode)   // <boay>...</body>
      // document.body --- body
      // console.log(document.body.parentNode)
      // // document.documentElement -- html
      // console.log(document.documentElement.parentNode)
    </script>
    

关闭二维码-一个（案例）

2.2 父找子

childNodes-获取所有类型的子节点，包含 注释，文本。。。（不常用）

children只会获取元素节点 （常用）

<div class="box">
      <!-- 这是注释 -->
      <p>aaaa</p>
      <span>span</span>
      这是字
    </div>

    <script>
      let box = document.querySelector('.box')
      console.log(box.childNodes) 
      console.log(box.children)  // p,span
    </script>
    

2.3找兄弟
nextElementSibling（下一个兄弟元素）

previousElementSibling（上一个兄弟元素）

如果没有则返回null

<div class="box">
    <p>我是p元素</p>
    <span>我是span</span>
    <h2>我是h2</h2>
  </div>

  <script>
    let span = document.querySelector('span')
    let p = document.querySelector('p')
    let h2 = document.querySelector('h2')

    console.log(h2.nextElementSibling)   // null
    console.log(h2.previousElementSibling)   // <span>我是span</span>
  </script>

3.创建节点

document.createElement('标签名称')

返回创建好的元素

只有元素本身，没有属性和内容，如果需要得自己添加

4.新增节点

添加做父子 做为最后一个子元素 父容器.appendChild(子元素) 放到某个子元素的前面 父容器.insertBefore(需要添加的子元素，参照元素) 如果没有找到参照元素，则默认为appendChild 但是两个参数不能少