【JavaScript】DOM 节点操作

DOM 节点

插入节点

如下代码演示：

<body>
  <h3>插入节点h3>
  <p>在现有 dom 结构基础上插入新的元素节点p>
  <hr>
  
  <div class="box">div>
  
  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

结论：

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

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

<body>
  <h3>插入节点h3>
  <p>在现有 dom 结构基础上插入新的元素节点p>
	<hr>
  <button class="btn1">在任意节点前插入button>
  <ul>
    <li>HTMLli>
    <li>CSSli>
    <li>JavaScriptli>
  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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

结论：

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

删除节点

<body>
  
  <button>删除节点button>
  <ul>
    <li>HTMLli>
    <li>CSSli>
    <li>Web APIsli>
  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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

查找节点

父子关系

<body>
  <button class="btn1">所有的子节点button>
  
  <ul>
    <li>HTMLli>
    <li>CSSli>
    <li>JavaScript 基础li>
    <li>Web APIsli>
  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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

结论：

childNodes 获取全部的子节点，回车换行会被认为是空白文本节点
children 只获取元素类型节点

<body>
  <table>
    <tr>
      <td width="60">序号td>
      <td>课程名td>
      <td>难度td>
      <td width="80">操作td>
    tr>
    <tr>
      <td>1td>
      <td><span>HTMLspan>td>
      <td>初级td>
      <td><button>变色button>td>
    tr>
    <tr>
      <td>2td>
      <td><span>CSSspan>td>
      <td>初级td>
      <td><button>变色button>td>
    tr>
    <tr>
      <td>3td>
      <td><span>Web APIsspan>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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

兄弟关系

<body>
  <ul>
    <li>HTMLli>
    <li>CSSli>
    <li>JavaScript 基础li>
    <li>Web APIsli>
  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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

结论：

previousSibling 获取前一个节点，以相对位置查找节点。
nextSibling 获取后一个节点，以相对位置查找节点。

相关阅读:
sm2加密算法
 Java基础—— 反射
 在线流程图和思维导图开发技术详解（三）
前端Ui框架bootstrap-vue地址
 线程和进程区别
 国产操作系统之银河麒麟服务器版V10安装
 百度工程师移动开发避坑指南——Swift语言篇
 SynthText流程解读 - 不看代码不知道的那些事
 【老生谈算法】matlab实现apriori算法源码——apriori算法
 死磕AI原生应用，李彦宏重新定义大模型
原文地址：https://blog.csdn.net/XiugongHao/article/details/134233098