什么是DOM

最新推荐文章于 2025-05-03 10:56:02 发布

鸭梨山大哎

最新推荐文章于 2025-05-03 10:56:02 发布

阅读量821

点赞数 14

分类专栏： js 文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/u010711495/article/details/146215015

版权

js 专栏收录该内容

37 篇文章

订阅专栏

DOM（Document Object Model，文档对象模型）是浏览器将HTML或XML文档解析为树形结构的一种表示方式。它将文档中的每个元素（如标签、属性、文本等）都视为一个对象（节点），并通过这些对象之间的关系（父子、兄弟等）构建出一个树形结构。通过DOM，开发者可以使用JavaScript等编程语言动态地访问、修改、添加或删除文档中的内容、结构和样式。

DOM的核心概念

节点（Node）:
DOM树中的每个部分都是一个节点，包括：
• 元素节点：HTML标签（如<div>、<p>等）。
• 属性节点：HTML标签的属性（如class、id等）。
• 文本节点：HTML标签内的文本内容。
• 注释节点：HTML中的注释（如）。
• 文档节点：整个文档的根节点（document）。

树形结构:
DOM以树形结构组织文档内容，根节点是document，每个HTML标签对应一个元素节点，标签内的内容对应子节点。例如：

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

对应的DOM树结构为：

document
├── html
│   ├── head
│   │   └── title
│   │       └── "My Page"
│   └── body
│       ├── h1
│       │   └── "Hello World"
│       └── p
│           └── "This is a paragraph."

节点关系:
• 父节点（Parent Node）：当前节点的直接上级节点。
• 子节点（Child Node）：当前节点的直接下级节点。
• 兄弟节点（Sibling Node）：与当前节点同级的节点。
• 祖先节点（Ancestor Node）：当前节点的所有上级节点。
• 后代节点（Descendant Node）：当前节点的所有下级节点。
DOM API:
DOM提供了一组接口（API），允许开发者通过JavaScript操作文档。例如：
• 获取元素：document.getElementById()、document.querySelector()等。
• 修改内容：innerHTML、textContent等。
• 修改样式：style、classList等。
• 添加/删除元素：appendChild()、removeChild()等。
• 事件处理：addEventListener()等。

DOM的作用

动态更新内容:
通过DOM，可以动态地修改网页的内容，例如更新文本、添加或删除元素等。
修改样式:
可以通过DOM修改元素的CSS样式，实现动态的视觉效果。
交互功能:
通过DOM事件（如点击、鼠标移动等），可以为网页添加交互功能。
操作表单:
可以通过DOM获取和修改表单元素的值，实现表单验证和动态提交。
构建动态页面:
通过DOM，可以动态地创建和插入元素，构建复杂的页面结构。

DOM的优缺点

优点:
• 提供了一种标准化的方式操作文档内容。
• 支持动态更新和交互功能。
• 跨浏览器兼容性较好（现代浏览器都支持DOM标准）。

缺点:
• 操作DOM可能会影响性能，尤其是在频繁更新或操作大量元素时。
• 复杂的DOM操作可能会导致代码难以维护。

示例代码

以下是一个简单的DOM操作示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DOM Example</title>
</head>
<body>
  <h1 id="title">Hello World</h1>
  <p class="content">This is a paragraph.</p>
  <button id="btn">Change Content</button>

  <script>
    // 获取元素
    const title = document.getElementById('title');
    const content = document.querySelector('.content');
    const button = document.getElementById('btn');

    // 修改内容
    button.addEventListener('click', function() {
      title.textContent = 'New Title';
      content.innerHTML = '<strong>New Content</strong>';
    });
  </script>
</body>
</html>