JavaScript DOM节点操作（增删改）常用方法

有一个深有体会的事：发现现在很多前端同学，经常用 Vue 开发项目之后，在某些需求场景要操作 DOM 节点的时，就不知道咋办了~~

以前接手过其他开发团队的项目，项目被漏洞扫描工具发现了异常，原因是用了一个 vue-video-player 插件用于播放视频，这插件又依赖了低版本的 video.js 插件，而扫描工具发现的异常就是低版本的 video.js 插件存在安全问题，而且最新版的 vue-video-player 插件依赖都还存在问题，所以通过升级 vue-video-player 并不能解决问题，这时候就必须使用原生的 video.js 插件，而不能套用 vue-video-player 插件。

当时在改这个漏洞的时候就在想一个问题：为什么不直接使用 video.js 插件？而要使用一个上层封装的 vue-video-player ？最后对比了两个插件代码才发现，上层封装的这个插件只是提供了相对简单的 Vue 组件语法糖，而底层的 video.js 必须要针对 DOM 节点进行操作。到这里大概就懂了当时开发这个功能的心思了，不太想写原生代码去操作 HTML 的 DOM 节点，毕竟 Vue 代码写习惯了，谁还会去写 DOM 操作的方法呢？

开发建议

咱们在项目开发的时候，应该尽可能少的安装三方依赖，如果三方依赖过多，不仅仅是代码的体积增大，还会导致供应链拉长，在这些过多的供应链中，如果某个依赖包存在漏洞，那么这个漏洞就会传播到项目，从而导致项目被攻击，这就是攻防体系中的 供应链攻击。

说回正题~~

DOM 操作

虽然 Vue/React 这些项目中咱们开发的时候不会写 DOM 操作的逻辑方法，但它们的本质还是离不开 DOM 节点的 增删改，毕竟要更新浏览器页面中的 HTML 元素，只能针对 DOM 节点进行操作。

创建 DOM 节点

常用的 DOM 节点操作方法就几个，其他不太常用的就不在此处列举~~

javascript 复制代码

document.createElement(tagName)
document.createTextNode(text)
document.createComment(data)

示例：

javascript 复制代码

// 创建元素节点
const div = document.createElement('div')
// 创建文本节点
const text = document.createTextNode('文本：前端路引')
// 创建注释节点
const comment = document.createComment('注释内容：公众号')

// 创建文档片段
const fragment = document.createDocumentFragment()
// 向文档片段中添加内容
fragment.appendChild(div)
fragment.appendChild(text)
fragment.appendChild(comment)

// 将文档片段添加到页面中
document.body.appendChild(fragment)

文档片段 这个方法是起到一个优化批量操作的作用，如果每次创建一个节点就往页面中添加，会导致页面频繁的回流重绘。使用 文档片段 这种方法，将要插入的节点内容，先缓存到文档片段中，然后再一次性添加到页面中，这样，页面就只会进行一次回流重绘，从而提高性能。

题外话：createComment 创建的注释节点，不仅仅可用于文档注释说明，还能用于保存其他一些数据在注释中，在需要的时候可以通过注释获取，比如：

javascript 复制代码

const comment = document.createComment('注释内容')
comment.data = '公众号：前端路引'
document.body.appendChild(comment)

// 在需要的时候，可以通过 data 属性获取数据内容
console.log(comment.data)

所有的 HTML 节点上都可以新增自定义属性，用于保存一些自定义数据内容。

插入 DOM 节点

几个 create 创建方法，是通过 document 对象调用，但是要往页面中插入元素的时候，需要在要插入的节点上调用对应方法。

scss 复制代码

// 末尾插入
node.appendChild(node)

// 指定位置插入
node.insertBefore(newNode, referenceNode)

/*
更灵活的插入，position 支持
beforebegin 元素自身的前面。
afterend 元素自身的后面。
afterbegin 插入元素内部的第一个子节点之前。
beforeend 插入元素内部的最后一个子节点之后。
*/
element.insertAdjacentHTML(position, html)

示例：

xml 复制代码

<div id="container">
</div>

<script>
  const container = document.querySelector('#container')
  
  // 创建元素节点
  const div = document.createElement('div')
  div.textContent = '新文本节点：前端路引'

  // 向 container 中添加 div
  container.appendChild(div)

  // 创建 span 节点
  const span = document.createElement('span')
  span.textContent = '这里是span节点'

  // 在 div 前添加 span
  container.insertBefore(span, div)

  container.insertAdjacentHTML('beforebegin', `container 前面`)
  container.insertAdjacentHTML('afterend', `container 后面`)
  container.insertAdjacentHTML('afterbegin', `<div> container 内部开头</div>`)
  container.insertAdjacentHTML('beforeend', `<div>container 内部结尾</div>`)
</script>

运行结果：

DOM 节点删除与替换

这类操作常用于删除页面中的某个元素，或者要将已经存在的元素替换为新的 HTML 元素

scss 复制代码

node.remove()
node.replaceChild(newNode, oldNode)

示例：

xml 复制代码

<div id="container">
  <h2>这里是容器：</h2>
  <div class="content">这里是内容区域</div>
</div>

<script>
  const container = document.querySelector('#container')
  
  // 创建元素节点
  const div = document.createElement('div')
  div.textContent = '新文本节点：前端路引'
  container.appendChild(div)
  
  // 替换 .content 节点为 span 节点
  const span = document.createElement('span')
  span.textContent = '这里是span节点'
  container.replaceChild(span, container.querySelector('.content'))
</script>

运行结果：

克隆节点

此方法用于复制节点，一般用于创建副本。

ini 复制代码

// deep=true 会克隆子节点
node.cloneNode(deep)

示例：

xml 复制代码

<div class="container">
  <h2>这里是容器：</h2>
  <div class="content">这里是内容区域</div>
</div>

<script>
  const container = document.querySelector('.container')
  
  // 复制元素节点，不包含子节点
  const clone = container.cloneNode()
  document.body.appendChild(clone)
  
  // 复制元素节点，包含子节点
  const clone2 = container.cloneNode(true)
  document.body.appendChild(clone2)
</script>

运行结果：

写在最后

DOM 操作是最底层的方法，在 Vue/React 出现之前，jQuery 能统治一个时代，就是它内部封装了优秀的 DOM 操作方法，通过一些 API 暴露封装后更简单的方法，让前端不至于频繁的去写一些复杂的 DOM 操作代码。