页面的DOM

weixin_44756352 · 2026-03-23 20:28:21 发布

专业术语：
文档对象模型。它是一个跨平台、语言中立的接口，允许程序（如JavaScript）动态地访问和更新文档的内容、结构和样式。它将HTML或XML文档表示为节点树结构。
大白话：
浏览器把你写的那些乱七八糟的HTML代码（一堆标签）读进去之后，把它变成一个活的对象模型。这个模型就像一张地图，把网页上的每一个元素（按钮、图片、文字）都变成了一个对象。你想改网页上的什么东西，不需要去改原文件，只需要操作这些对象就行。
生活案例：
这就像买了一个“乐高”积木套装。
- HTML源码 = 那本厚厚的、静态的说明书。上面写着“步骤1：把2x4的砖块放在这里”。
- DOM = 你按照说明书拼好的那个立体模型。这个模型是活的，你可以随时拔掉它的头，给它换个胳膊，或者把它拆了重拼。
- 操作DOM = 你的手在模型上操作，想拔哪个零件就拔哪个。

专业术语：
DOM树。一个树形结构，根节点是document对象，其余节点（元素节点、文本节点、属性节点等）通过父子、兄弟关系层级排列。
大白话：
网页不是一坨平铺的文字，而是一棵倒着长的大树。最上面的根叫document，<html>是大树干，<head>和<body>是分叉，<div>是树枝，文字是树叶。你要找某个树叶，就得顺着树干、树枝一路找下去。
生活案例：
就像你家的族谱。
- 根：祖宗。
- 父节点：你爷爷。
- 子节点：你爸爸、你叔叔。
- 兄弟节点：你和你堂哥。
- DOM也是这样，一个<div>里面套着一个<p>，那<p>就是<div>的儿子。你没法让孙子辈的标签跨越层级直接成为根，就像你没法让你侄子管你叫爸一样，结构是固定的。

专业术语：
将静态文档转换为动态可编程的资源。DOM提供了API（应用程序编程接口），使得JavaScript可以监听事件、修改属性、增删节点，从而实现交互效果。
大白话：
因为HTML自己“不会动”。如果没有DOM，你做出来的网页就是个Word文档，只能看，点哪儿都没反应。有了DOM，浏览器把HTML交给你来控制，你想让那个按钮点击后变红，或者把图片换成另一张，就能通过这些接口去实现。
生活案例：
还是用乐高模型。
如果只有乐高说明书（HTML），模型是死的，你只能看。
DOM 就是把模型放在了一个智能工作台上，工作台给你提供了一把镊子和一管胶水（这就是API）。
- 你想把红色积木换成蓝色？用镊子夹走红色，放上蓝色。
- 你想让模型眨眼睛？胶水粘个眼睛上去。
  这就是JavaScript通过DOM操作网页的原理。

专业术语：
HTML是静态源码，DOM是解析后的内存表示。当浏览器解析HTML时，会构建DOM树，两者在结构上可能不一致（例如浏览器自动修复缺失的闭合标签，或JavaScript动态修改了DOM）。
大白话：
你写的代码和浏览器实际运行的模型，是两码事。
你可以写一个空的<div>，然后通过JavaScript往里面塞了10个按钮。这时候你去右键点击“查看网页源代码”，看到的还是那个空的<div>；但是你去“检查元素”（看DOM），里面已经有10个按钮了。
生活案例：
就像你去买房。
- HTML = 户型图。交房前，图纸上画着这里有个墙，那里有个门。
- DOM = 实际装修好的房子。
  你在入住后（JavaScript运行时），把那面墙砸了（修改DOM）。现在房子（DOM）已经没有墙了，但你的户型图（HTML源码）上还画着那面墙。所以，我们平时做网页开发，改的是“房子”（DOM），而不是“户型图”（HTML文件）。