# 章序号/节序号/节/笔记序号
- Objective：解决什么问题
# 概念阐释
可以让JavaScript对HTML DOM树进行访问和修改，最终用户会在浏览器中看到**样式的动态修改效果**。因此HTML DOM属于[[Web API]] 的一种 。
- 每个节点都是一个对象，拥有方法和属性
- HTML DOM树共有4种节点`node`：
- 文档[[js DOM Document 根节点]]( `root node` 根节点)
- 元素节点`html` `body` `head`
- 属性节点`attribute`(包括`class`和`id`)
- 文本节点text
- JavaScript可以访问和修改这些节点
- 所有的修改最终反映到浏览器中
# 举例子
我们现在访问的任何网页页面，它都支持所有浏览器（Chrome、Edge、Safari）的访问，这都是因为DOM这套文档标准。
```html
<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Here is a paragraph of text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
```
```
Document
└─── html
├─── head
│ └─── title
│ └─── (text) Simple HTML Example
└─── body
├─── h1
│ └─── (text) Hello, World!
├─── p
│ └─── (text) Here is a paragraph of text.
└─── ul
├─── li
│ └─── (text) Item 1
└─── li
└─── (text) Item 2
```
这个DOM树表示了HTML文档的结构。树中的每个节点都是一个**对象**，可以用编程语言（如JavaScript）进行访问和操作。树的根节点是文档节点（Document），它包含了整个文档的信息。
# 类比、比较与对比
## The Virtual DOM
不用每次重写HTML页面，而是只修改已改动的部分。
# 问题
# 问题答案
# 备注（经验集/错误集）
## 参考资料
- [HTML DOM API - Web API 接口参考 |多核 (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API)
- [操作文档介绍](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
- [the virtual DOM](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-the-virtual-dom-303f2a22-ab63-45d8-ad0b-103e671998fc/videos/virtual-dom)