什么是DOM?
DOM 的全称是 Document Object Model,译为文档对象模型。说的通俗一点,DOM 就是为 HTML 文档提供 的⼀个API(接口)。提供这个接口有什么用呢?有了这个接口,我们就可以去操作 HTML 文档了。
为什么要使用DOM?
相⽐比起⼀一成不不变的静态⻚页⾯面,⼤大家更更喜欢动态化的 HTML ⽂文档。⽽而 JavaScript,就可以满⾜足⼤大家对动态化⽂文 档的需求。
通过 JavaScript,我们可以重构整个 HTML ⽂文档,可以添加、删除、修改或重排⻚页⾯面上的项⽬目。但是, JavaScript 并不不能直接操作我们的⽂文档。想要改变 HTML 中的某⼀一个元素,JavaScript 需要找到访问该元素 的⼊入⼝口。这个⼊入⼝口,连同对 HTML 元素进⾏行行⼀一系列列操作的⽅方法和属性,都是通过⽂文档对象模型(DOM)来获 得的。
DOM 的发展历程?
DOM 的级别包含了了从第 0 级到第 3 级。
DOM 0 级: 定义了了 Document 对象的⼀一些属性和⽅方法。
DOM 1 级:是 W3C 在 1998 年年 10 ⽉月提出的第⼀一个正式的 W3C DOM 标准。 DOM Core(核⼼心):提供了了 DOM 模型、内存管理理、命名约定等⽅方便便访问和操作 HTML ⻚页⾯面的内 容。 DOM HTML:提供了了⼀一些 HTML ⻚页⾯面相关的对象以及 HTML 标签的属性和⽅方法等。
DOM 2 级:是基于 DOM 1 级并且扩展了了 DOM 1 级,还添加了了视图、事件以及 CSS 样式的内容。 DOM View:描述 HTML ⽂文档的各种视图的接⼝口。 DOM Events:描述了了事件流、事件监听注册、事件接⼝口以及⽂文档事件接⼝口等内容。 DOM Style:描述了了 CSS 样式的接⼝口。 DOM Traversal and Range:描述遍历和操作 HTML ⽂文档的接⼝口。
DOM 3 级:引⼊入了了统⼀一的⽂文档读取和保存的⽅方法, DOM Load and Save: 描述了了⽂文档的读取和保存的接⼝口。 DOM Validation: 描述了了⽂文档验证的接⼝口。
DOM 节点
DOM 节点树结构
<html lang="en"> <head> <meta charset="UTF-8"> <title>DOM 节点树</title> </head> <body> <h1> <a href="#"> hello world </a> </h1> </body> </html>
DOM API
W3C 提供的 DOM 标准通过⼀一系列列对象实现,其中主要以 Document 对象、Element 对象和 Node 对象为 主。