什么是DOM?
1.CSS基础-选择器2.CSS基础-权重计算3.CSS基础-文字样式4.CSS基础-行和段落常用属性5.CSS基础-继承性6.CSS基础-盒模型7.CSS基础-浮动8.CSS基础-定位9.CSS基础-边框和圆角10.CSS基础-背景11.CSS基础-2D变形12.CSS基础-3D变形13.CSS基础-过渡动画14.JS基础-初识JavaScript15.JS基础-变量16.JS基础-数据类型17.JS基础-表达式和运算符18.JS基础-数据类型转换19.JS基础-分支语句20.Js基础-循环语句21.Js基础-复杂数据类型之数组22.Js基础-函数23.Js基础-闭包
24.什么是DOM?
25.DOM操作之元素查找26.DOM元素之更改概念
DOM(Document Object Model , 文档对象模型) ；
简单来说，浏览器会将整个网页看成一棵节点树；而Js语言需要通过一种动态的技术去操作这棵树，这种技术就是DOM
一张网页的树性结构
例如下面这张代码的网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
</head>
<body>
<div>
<h1>这是标题</h1>
</div>
<div>
<img src="logo-short.png"/>
<div>简介...</div>
</div>
</body>
</html>
DOM会解析成如下结构
可见，在解析渲染一个网页的时候， 运行环境不会简单的把文本信息看成一个字符串， 而是解释为一棵树， 每个元素都是其上面的一个节点
不仅是带标签的元素（例如
） 会被当成一个节点，一段文本或者简单的一个换行符也会被当成一个节点每个节点都会有一个nodeType属性值，这个属性标记了此节点是什么类型
| nodeType值 | 节点类型 | 举例 |
|---|---|---|
| 1 | 元素节点 |
|
| 3 | 文字节点 | 我是小明 |
| 8 | 注释节点 | <!—注释节点—> |
| 9 | document节点 | document节点只有一个 |
| … |
Document 对象
document 对象封装了一整棵HTML的属性结构， 它是DOM节点的根
document对象的 nodeType 属性是 9 ，每张网页只有一个document对象
为了验证上面我们说的正确性，我们随便找个网站试下，打开百度 ,在控制台中输入 document , 它会把整个网页返给我们
随后，我们检测下document的nodeType, 会返回9
请关于一下啦^_^
微信公众号
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
· 零经验选手，Compose 一天开发一款小游戏！