DOM 简介
- DOM 是 Document Object Model 的缩写，译为 文档对象模型
- DOM 是针对 XML 但经过扩展用于 HTML 的 应用程序编程接口（ API，Application Programming Interface）
- DOM 不只是针对 javascript 的，很多其它语言也实现了 DOM
- DOM 规范解释了文档的结构并提供了对其进行操作的对象
- DOM 提供了使程序和脚本有能力去动态访问和更新文档内容、结构及样式的方法和接口
- window 是 浏览器窗口对象，document 是 window 下的一个属性，代表整个 DOM 对象模型
- DOM 把整个页面映射为一个 多层节点结构，称为 DOM 树 HTML 或 XML 页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据
- 以 html 为根节点，各种标签形成分支节点组成倒立的树状结构，称为 DOM 树
- 通过 DOM 提供的方法去获取或操做的节点称为 DOM 对象
- DOM 节点：
- 元素节点 标签
- 属性节点 标签属性
- 对象节点 文本内容
- 注释节点 注释说明
DOM 级别
DOM0 不存在的
- 在阅读 DOM 标准的时候，可能会遇到 DOM0 级（DOM Level 0）
- DOM0 级标准并不存在，所谓 DOM0 级是 Internet Explorer 4.0 和 Netscape Navigator 4.0 最初支持的 DHTML（Dynamic HTML），只是 DOM 历史坐标中的一个参照点
DOM1 最初的标准
- DOM1 级（ DOM Level 1）于 1998 年 10 月成为 W3C（World Wide Web Consortium，万维网联盟）的 推荐标准
- DOM1 级由 DOM Core（DOM 核心）和 DOM HTML 两个模块组成
- DOM Core 规定的是如何映射基于 XML 的文档结构，以便简化对文档任意部分的访问和操作
- DOM HTML 模块在 DOM Core 的基础上加以扩展，添加了针对 HTML 的对象和方法
- DOM1 级的目标主要是 映射文档的结构
DOM2 新模块，新类型，新接口
- DOM Views（DOM 视图）：定义了跟踪不同文档视图的接口（如应用 CSS 之前和之后的文档）
- DOM Events（DOM 事件）：定义了事件和事件处理的接口
- DOM Style（DOM 样式）：定义了基于 CSS 为元素应用样式的接口
- DOM Traversal and Range（DOM 遍历和范围）：定义了遍历和操作文档树的接口
DOM3 DOM 新增模块、核心扩展
- 引入了以统一方式加载和保存文档的方法，DOM Load and Save（DOM 加载和保存）模块
- 新增了验证文档的方法，DOM Validation（DOM 验证）模块
- DOM 核心扩展，开始支持 XML 1.0 规范，涉及 XML Infoset、XPath 和 XML Base
其他 DOM 标准
除了 DOM 核心和 DOM HTML 接口之外，其他几种语言还发布了 只针对自己 的 DOM 标准，以下是其他 W3C 推荐的标准：
- SVG（ Scalable Vector Graphic，可伸缩矢量图） 1.0
- MathML（ Mathematical Markup Language，数学标记语言） 1.0
- SMIL（ Synchronized Multimedia Integration Language，同步多媒体集成语言）
- XUL（ XML User Interface Language， XML 用户界面语言，Mozilla 开发）
获取 DOM 对象
window.onload
js
window.onload = function() {
}window.onload是等待页面加载完成事件- 通常 js 代码写在
window.onload函数中，页面加载完成后才会执行该函数中的代码
document.getElementById()
- 参数为 id 名
- 通过 id 获取单个元素封装为 DOM 对象并返回
document.getElementsByTagName()
- 参数为标签名
- 通过标签获取元素封装为 DOM 对象，返回一个伪数组
document.getElementsByClassName()
- 参数为类名
- 通过类名获取元素封装为 DOM 对象，返回一个伪数组
querySelector()
- 通过选择器获取单个元素封装为 DOM 对象并返回
querySelectorAll()
- 通过选择器获取多个元素封装为 DOM 对象，返回一个伪数组