DOM节点的操作方法

alyssa
75 阅读5分钟

DOM 节点

回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等。

查找节点

和之前的querySelector方法不同的是，我们可以通过在已知某个节点的情况下去查找对应的父节点、子节点、兄弟节点

父节点查找
子元素.parentNode

返回最近一级的父节点，没有则返回null 可以应用于点击关闭，关闭按钮是子节点，关闭父节点

<body>
  <table>
    <tr>
      <td width="60">序号</td>
      <td>课程名</td>
      <td>难度</td>
      <td width="80">操作</td>
    </tr>
    <tr>
      <td>1</td>
      <td><span>HTML</span></td>
      <td>初级</td>
      <td><button>变色</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td><span>CSS</span></td>
      <td>初级</td>
      <td><button>变色</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td><span>Web APIs</span></td>
      <td>中级</td>
      <td><button>变色</button></td>
    </tr>
  </table>
  <script>
    // 获取所有 button 节点，并添加事件监听
    const buttons = document.querySelectorAll('table button')
    for(let i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', function () {
        // console.log(this.parentNode); // 父节点 td
        // console.log(this.parentNode.parentNode); // 爷爷节点 tr
        this.parentNode.parentNode.style.color = 'red'
      })
    }
  </script>
</body>

 


























序号课程名难度操作
1HTML初级变色
2CSS初级变色
3Web APIs中级变色


子节点查找
  • childNodes 获得所有子节点，包括文本节点（空格、换行）、注释节点等
  • children属性 （重点）
父节点.children

- 仅返回所有元素节点
- 返回的还是一个伪数组
- 选中的是亲儿子

<body>
  <button class="btn1">所有的子节点</button>
  <!-- 获取 ul 的子节点 -->
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript 基础</li>
    <li>Web APIs</li>
  </ul>
  <script>
    const btn1 = document.querySelector('.btn1')
    btn1.addEventListener('click', function () {
      // 父节点
      const ul = document.querySelector('ul')

      // 所有的子节点
      console.log(ul.childNodes)
      // 只包含元素子节点
      console.log(ul.children)
    })
  </script>
</body>

 
所有的子节点


  • HTML

  • CSS

  • JavaScript 基础

  • Web APIs



兄弟关系查找
  1. nextElementSibling下一个兄弟节点
  2. previousElementSibling上一个兄弟节点
<body>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript 基础</li>
    <li>Web APIs</li>
  </ul>
  <script>
    // 获取所有 li 节点
    const lis = document.querySelectorAll('ul li')

    // 对所有的 li 节点添加事件监听
    for(let i = 0; i < lis.length; i++) {
      lis[i].addEventListener('click', function () {
        // 前一个节点
        console.log(this.previousSibling)
        // 下一下节点
        console.log(this.nextSibling)
      })
    }
  </script>
</body>
  • HTML
  • CSS
  • JavaScript 基础
  • Web APIs
创建节点

一般是先创建一个新节点，然后再插入节点 创建

document.createElement('标签名')
克隆节点
元素.cloneNode(布尔值)
  • 若为true，则代表克隆的适合会包含后代节点一起克隆
  • 若为false,则代表克隆时不包含后代节点
  • 默认为false
插入节点

在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的 DOM 节点，其次在哪个位置插入这个节点。

语法

//插入到总共父元素的最后
父元素.appendChild(要插入的元素)

//插入到某个子元素的前面
父元素.insertBrfore(要插入的元素,在哪个元素前面)

如下代码演示：

<body>
  <h3>插入节点</h3>
  <p>在现有 dom 结构基础上插入新的元素节点</p>
  <hr>
  <!-- 普通盒子 -->
  <div class="box"></div>
  <!-- 点击按钮向 box 盒子插入节点 -->
  <button class="btn">插入节点</button>
  <script>
    // 点击按钮，在网页中插入节点
    const btn = document.querySelector('.btn')
    btn.addEventListener('click', function () {
      // 1. 获得一个 DOM 元素节点
      const p = document.createElement('p')
      p.innerText = '创建的新的p标签'
      p.className = 'info'
      
      // 复制原有的 DOM 节点
      const p2 = document.querySelector('p').cloneNode(true)
      p2.style.color = 'red'

      // 2. 插入盒子 box 盒子
      document.querySelector('.box').appendChild(p)
      document.querySelector('.box').appendChild(p2)
    })
  </script>
</body>

 

插入节点


在现有 dom 结构基础上插入新的元素节点






插入节点

结论：

  • createElement 动态创建任意 DOM 节点
  • cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
  • appendChild 在末尾（结束标签前）插入节点

再来看另一种情形的代码演示：

<body>
  <h3>插入节点</h3>
  <p>在现有 dom 结构基础上插入新的元素节点</p>
	<hr>
  <button class="btn1">在任意节点前插入</button>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <script>
    // 点击按钮，在已有 DOM 中插入新节点
    const btn1 = document.querySelector('.btn1')
    btn1.addEventListener('click', function () {

      // 第 2 个 li 元素
      const relative = document.querySelector('li:nth-child(2)')

      // 1. 动态创建新的节点
      const li1 = document.createElement('li')
      li1.style.color = 'red'
      li1.innerText = 'Web APIs'

      // 复制现有的节点
      const li2 = document.querySelector('li:first-child').cloneNode(true)
      li2.style.color = 'blue'

      // 2. 在 relative 节点前插入
      document.querySelector('ul').insertBefore(li1, relative)
      document.querySelector('ul').insertBefore(li2, relative)
    })
  </script>
</body>

 

插入节点


在现有 dom 结构基础上插入新的元素节点



在任意节点前插入

  • HTML

  • CSS

  • JavaScript



结论：

  • createElement 动态创建任意 DOM 节点
  • cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
  • insertBefore 在父节点中任意子节点之前插入新节点
删除节点

删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。

语法

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

<body>
  <!-- 点击按钮删除节点 -->
  <button>删除节点</button>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Web APIs</li>
  </ul>

  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      // 获取 ul 父节点
      let ul = document.querySelector('ul')
      // 待删除的子节点
      let lis = document.querySelectorAll('li')

      // 删除节点
      ul.removeChild(lis[0])
    })
  </script>
</body>

 

删除节点


  • HTML

  • CSS

  • Web APIs


​

  结论：removeChild 删除节点时一定是由父子关系。

avatar
文章
阅读
粉丝