Document Object Model（DOM，文档对象模型）是W3C（World Wide Web Consortium，万维网联盟）的标准，定义了访问HTML和XML文档的标准方法：W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。简单来说，就是用于连接document和JavaScript的桥梁。
| 文档对象模型 |
DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。将文档通过对象建模的方式，构建成一个逻辑上的对象。学过面向对象编程的同学都应该知道，既然是对象，那么它肯定拥有属性和行为（方法）。文档对象模型不仅包含文档的结构，也包括文档的行为和它所组成的对象。
| HTML DOM |
HTML DOM 定义了访问和操作 HTML 文档的标准。根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点。
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
以下HTML文档
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>文档标题</title>
</head>
<body>
<a href="">我的链接</a>
<a >我的链接</a>
</body>
</html>
很明显，这些标签不是随意摆放的，它们有自己的规则。首先，它们是嵌套的，一层套一层，比如 html 套 body，body 又套 a。
| DOM 树 |
为什么要按照这种结构来组织呢？目的其实是方便解析和查询。解析的时候，从外向里循序渐进，好比按照图纸盖房子，先盖围墙，再盖走廊，最后才盖卧室。查询的时候，会遵循一条明确的路线，例如“D盘/文化交流/影视作品/给产品经理讲技术avi”，一层一层地缩小范围，查找效率会非常高。
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树（俗称DOM树）：
浏览器在解析 HTML 时，会在它的内部构建这样一棵 DOM 树，然后按照这棵树上的层次顺序解析每个标签。
为了更加直观地理解 DOM 树，你可以打开 Chrome 的“开发者工具”，选择“Console”标签来打开控制台，然后在控制台里面输入“document”后回车，这样你就能看到一个完整的 DOM 树结构。
图中的 document 就是 DOM 结构，你可以看到，DOM 和 HTML 内容几乎是一样的，但和 HTML 不同的是，DOM 是保存在内存中树状结构，可以通过 JavaScript 来查询或修改其内容。
| HTML DOM 对象 - 方法、属性、事件 |
刚才说了，文档对象模型不仅包含文档的结构，也包括文档的属性方法等。
一些常用的 HTML DOM 方法：
getElementById(id)- 获取带有指定 id 的节点（元素）appendChild(node)- 插入新的子节点（元素）removeChild(node)- 删除子节点（元素）
一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
一些常用的 HTML DOM 事件：
- onclick -单击节点（元素）触发
- onload -页面加载完成触发
- onchange -输入值发生改变触发
扫一扫
1800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
