DOM讲解

创作时间:

作者:

@小白创作中心

DOM讲解

引用

CSDN

https://m.blog.csdn.net/weixin_63698171/article/details/144589157

DOM（Document Object Model，文档对象模型）是连接网页和脚本（JavaScript、TypeScript）的桥梁。

1. DOM 的基本概念

DOM 将网页的结构表示为一个树形结构，其中每个元素、属性和文本都被表示为树中的一个节点。

文档节点（Document Node）：树的根节点，代表整个HTML文档。
元素节点（Element Node）：代表HTML元素，例如<div>、<p>、<a>等。
属性节点（Attribute Node）：代表HTML元素的属性，例如id、class、href等。
文本节点（Text Node）：代表HTML元素中的文本内容。

<!DOCTYPE html>
<html>
<head>
  <title>DOM讲解</title>
</head>
<body>
  <h1>欢迎</h1>
  <p id="my-paragraph">这是一个段落。</p>
</body>
</html>

以上HTML在DOM中会被表示成类似这样的树状结构：

文档节点 (Document)
└── <html> 元素节点
    ├── <head> 元素节点
    │   └── <title> 元素节点
    │       └── 文本节点 ("DOM讲解")
    └── <body> 元素节点
        ├── <h1> 元素节点
        │   └── 文本节点 ("欢迎")
        └── <p> 元素节点 (id="my-paragraph")
            └── 文本节点 ("这是一个段落。")

2. DOM有什么用？

DOM的主要作用是允许JavaScript动态地访问和修改网页的内容、结构和样式。通过DOM，你可以：

访问HTML元素：通过ID、类名、标签名等方式获取页面上的元素。例如，使用document.getElementById("my-paragraph")可以获取上面例子中的<p>元素。
修改HTML内容：改变元素的文本内容、HTML结构等。例如，使用element.innerHTML = "新的内容"可以改变元素的内部HTML。
修改HTML样式：改变元素的CSS样式。例如，使用element.style.color = "red"可以将元素的文本颜色改为红色。
添加或删除HTML元素：动态地向页面添加或删除元素。
响应事件：监听用户的操作（例如点击、鼠标悬停等），并执行相应的JavaScript代码。

3. DOM是怎么做到的？

DOM 树与浏览器渲染

当浏览器加载一个 HTML 页面时，它首先将 HTML 代码解析成DOM 树。DOM 树是一个树形结构，它把 HTML 元素（如<html>、<body>、<div>、<h1>等）表示为节点，这些节点之间通过父子关系连接。

DOM 树并不是直接呈现给用户看的，它是浏览器内部的一种数据结构，代表了页面的内容和结构。浏览器会根据 DOM 树来渲染页面内容并显示在用户的屏幕上。

通过修改 DOM 实现动态更新

一旦浏览器构建了 DOM 树，开发者可以通过 JavaScript 来操作 DOM，从而实现动态更新页面内容。

当我们修改 DOM 时，实际上是对 DOM 树进行修改。这些修改会立即反映到浏览器的页面上，达到动态更新HTML 内容的效果。

比如：

修改文本内容：可以通过 DOM 修改某个节点的文本内容。
修改样式：通过 DOM 修改节点的 CSS 样式。
添加/删除元素：可以通过 DOM 动态地插入或删除页面上的元素。
响应用户事件：当用户点击按钮、输入文本等，DOM 会响应这些事件并做出相应的改变。

修改 DOM 会更新页面的核心

DOM 树是浏览器渲染页面的基础：浏览器通过 DOM 树来构建页面的内容和结构。因此，当你修改 DOM 树中的某个节点时，浏览器会重新渲染（或部分更新）页面，确保页面反映出最新的 DOM 结构。
浏览器实时响应：当你通过 JavaScript 修改 DOM 时，浏览器会实时更新页面显示，体现出动态效果。