举个例子，假设你有以下 HTML 代码：

  


  
欢迎来到我的网页
  
这是一个段落。

那么对应的 DOM 树大概是这样的（简化版）：

• html
  • head
    • title
      • "我的网页"
  • body
    • h1
      • "欢迎来到我的网页"
    • p
      • "这是一个段落。"

如何通过 JavaScript 操作 DOM？

JavaScript 提供了很多方法来访问和修改 DOM 树上的节点。最常用的方法包括：

• 查找元素:
  • document.getElementById(id): 通过元素的 ID 查找。这是最快也最常用的方法。
  • document.getElementsByClassName(className): 通过元素的 class 名称查找。返回一个 HTMLCollection，需要通过索引访问。
  • document.getElementsByTagName(tagName): 通过元素的标签名查找。同样返回一个 HTMLCollection。
  • document.querySelector(selector): 使用 CSS 选择器查找第一个匹配的元素。
  • document.querySelectorAll(selector): 使用 CSS 选择器查找所有匹配的元素。返回一个 NodeList。
• 修改元素:
  • element.innerHTML: 修改元素的 HTML 内容。小心使用，可能会导致 XSS 攻击。
  • element.textContent: 修改元素的文本内容。更安全，推荐使用。
  • element.setAttribute(attributeName, attributeValue): 设置元素的属性。
  • element.removeAttribute(attributeName): 移除元素的属性。
  • element.style.propertyName: 修改元素的 CSS 样式。
• 创建和添加元素:
  • document.createElement(tagName): 创建一个新的 HTML 元素。
  • document.createTextNode(text): 创建一个新的文本节点。
  • element.appendChild(newNode): 将一个新的节点添加到元素的子节点列表的末尾。
  • element.insertBefore(newNode, referenceNode): 将一个新的节点添加到元素的子节点列表中的指定位置。
  • element.removeChild(childNode): 移除元素的子节点。

一个简单的例子：

  


  
原始标题
  修改标题

  

在这个例子中，点击按钮会调用 changeHeading() 函数，这个函数会找到 ID 为 "myHeading" 的

元素，然后将其文本内容修改为 "新标题!"。

DOM 操作的性能问题

频繁的 DOM 操作会影响网页的性能，因为每次修改 DOM 都会导致浏览器重新渲染页面。为了优化性能，应该尽量减少 DOM 操作的次数。

一些建议：

• 批量更新: 如果需要修改多个元素，可以先将这些修改收集起来，然后一次性应用到 DOM 上。
• 使用 DocumentFragment: DocumentFragment 是一个轻量级的文档片段，可以在内存中构建 DOM 结构，然后一次性添加到 DOM 树中。
• 缓存 DOM 节点: 如果需要多次访问同一个 DOM 节点，可以将其缓存起来，避免每次都重新查找。

为什么需要虚拟 DOM？

虚拟 DOM 是 React 等前端框架为了解决 DOM 操作性能问题而引入的一种技术。它本质上是一个 JavaScript 对象，用来描述真实的 DOM 结构。当组件的状态发生变化时，React 会先在虚拟 DOM 上进行修改，然后将修改后的虚拟 DOM 与之前的虚拟 DOM 进行比较，找出需要更新的部分，最后只更新真实 DOM 中对应的部分。

虚拟 DOM 的好处在于，它可以减少不必要的 DOM 操作，从而提高网页的性能。它相当于在真实 DOM 和 JavaScript 代码之间增加了一个缓冲层，避免了频繁的直接操作 DOM。虽然引入虚拟 DOM 会增加一些额外的计算开销，但通常来说，这些开销远小于直接操作 DOM 的开销。

好了，本文到此结束，带大家了解了《HTMLDOM是什么？如何操作DOM对象》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！