什么是HTML DOM？如何操作文档对象模型-html教程-PHP中文网

什么是HTML DOM？如何操作文档对象模型

星降

发布： 2025-08-04 09:19:01

原创

927人浏览过

dom树是html文档的层级结构表示，其中html标签为根节点，head、body为子节点，其下元素逐级展开形成树状结构；1.通过javascript操作dom可访问和修改节点，常用方法包括document.getelementbyid、getelementsbyclassname、getelementsbytagname、queryselector和queryselectorall来查找元素；2.修改元素内容可用innerhtml或textcontent，设置属性用setattribute，修改样式用style.propertyname；3.创建元素使用createelement和createtextnode，添加用appendchild或insertbefore，删除用removechild；4.为提升性能应减少直接dom操作，可通过批量更新、使用documentfragment和缓存节点优化；5.虚拟dom是前端框架为解决性能问题引入的技术，通过在内存中比较新旧虚拟dom差异，仅将变化部分更新到真实dom，从而减少重渲染开销，提高页面性能。

什么是HTML DOM？如何操作文档对象模型

HTML DOM 就像一个树状图，它把 HTML 文档的每个元素都看作一个对象，你可以通过 JavaScript 来访问和修改这些对象，从而动态地改变网页的内容和结构。

HTML DOM（文档对象模型）是 HTML 文档的标准对象表示，它定义了访问和操作 HTML 文档的标准方法。

什么是 DOM 树？

DOM 树是 HTML 文档的层级结构表示。想象一下，你的 HTML 代码就像一棵树，

<html>

登录后复制

标签是树根，

<body>

登录后复制

、

<head>

登录后复制

是树干，而段落

<p>

登录后复制

、标题

<h1>

登录后复制

、链接

<a>

登录后复制

等元素就是树枝和树叶。每个 HTML 标签、属性、文本都对应 DOM 树上的一个节点。

立即学习“前端免费学习笔记（深入）”；

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

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
</body>
</html>

登录后复制

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

```
html
```
登录后复制
- ```
head
```
  登录后复制
  - ```
  title
```
  登录后复制
  - "我的网页"
    登录后复制
- ```
body
```
  登录后复制
  - ```
  h1
```
  登录后复制
  - "欢迎来到我的网页"
    登录后复制
- ```
p
```
    登录后复制
    - "这是一个段落。"
      登录后复制

如何通过 JavaScript 操作 DOM？

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

Calliper 文档对比神器

文档内容对比神器

查看详情

查找元素:
- ```
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)
```
  登录后复制
  : 移除元素的子节点。

一个简单的例子：

<!DOCTYPE html>
<html>
<head>
  <title>DOM 操作示例</title>
</head>
<body>
  <h1 id="myHeading">原始标题</h1>
  <button onclick="changeHeading()">修改标题</button>

  <script>
    function changeHeading() {
      let heading = document.getElementById("myHeading");
      heading.textContent = "新标题!";
    }
  </script>
</body>
</html>

登录后复制

在这个例子中，点击按钮会调用

changeHeading()

登录后复制

函数，这个函数会找到 ID 为 "myHeading" 的

<h1>

登录后复制

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

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 的开销。

以上就是什么是HTML DOM？如何操作文档对象模型的详细内容，更多请关注php中文网其它相关文章！