第9章 DOM
9.1 DOM的定义
在希望通过 JavaScript 来对页面的内容进行操作时,如果文档的内容与结构能够以一种便于程序处理的形式表现,无疑会给处理带来方便。比如说,虽然可以直接修改以字符串形式表示的 HTML 资源内容,但如果可以对“id 是 foo 的
标签”,或“所有的标签”这样的集合进行操作,则程序的可读性会更高,书写也较为简单。为此,JavaScript 中引入了DOM 的概念。
DOM 是一种 API,其作用为在程序中使用 HTML文档以及 XML 文档。在 DOM 中,HTML 文档与XML 文档会以树形对象集合的形式被使用。这一树形结构称为 DOM 树。
DOM 树中的一个个对象被称为节点。节点之间形成了一个树形结构,树中的某个节点可能会引用另外一个节点。根据引用关系,分别有父节点、子节点、兄弟节点、祖先节点、子孙节点等类型。
根据 W3C 的定义,DOM 可以分为 Level1 ~ 3这几层。
DOM Level 1
DOM Level 1 是由 Core 与 HTML 这两个模块组成的。在 DOM Level 1 Core 中包含很多操作 DOM 树的方法。
DOM Level 1 的模块一览
DOM Level 1 Core
DOM Level 2
与 DOM Level 1 相比,DOM Level 2 中包含了很多模块。其中包括 Events 这样与 addEventListener()等事件处理方法相关的模块,或者 DOM Level 1 中 Core 模块以及 HTML 模块的扩展模块。
CSS 也是在 DOM Level 2 中定义的模块。可惜的是,Internet Explorer 8 以及更早的版本并没有遵循DOM Level 2 标准。而 Firefox 或 Google Chrome 等现代浏览器则几乎完全支持 DOM Level 2。
DOM Level 2 所包含的模块一览
DOM Level 3
9.2 DOM的基础
9.3 节点的选择
9.4 节点的创建与新增
9.5 节点的内容更改
9.6 节点的删除
9.7 innerHTML/textContent
9.8 DOM操作的性能