一, DOM 简介
什么是 DOM? 简单地说, DOM 是是针对 html 和 xml 文档的一个 API, 一套对文档的内容进行抽象和概念化的方法.
学习过 ORM 的同学可能知道 ORM 是将数据库中的表映射到类, 建立一个表和类的映射模型, 类属性为表字段, 类实例为表记录, 通过操作类和类的实例来对数据库进行增删改查.
DOM 就是另一种模型, 不同的是 DOM 是将一个 HTML 或 xml 文档映射到一个家谱树, 文档中的内容划分为许多类型的节点, 这些节点按照原本的层次组成一颗家谱树, 通过对家谱树节点的操作来达到对整个文档的增删改查.
也就是说, DOM 描绘了一个层次化的节点树, 可以使用 JS 来操作这个节点树, 进而改变底层文档的外观和结构.
另外 DOM 也分为几种不同的等级, 这主要是根据每一级推出的时间及主要功能来分的. 最开始的 DOM(DOM0)在每个浏览器的实现都有很大的区别, 大大增加了开发的难度, 为此, W3C 结合各家优点, 推出了一个标准化的 DOM(DOM1), 主要定义了 HTML 和 xml 文档的底层结构. 之后推出的 DOM2 和 DOM3 则在这个结构的基础上引入了更多的交互能力, 其目的在于扩展 DOM API, 以满足操作 xml 的需求, 同时提供更好的错误处理及特性检测, 这些功能的关键是对命名空间的支持, 我们在之后会详细讲解.
二, DOM 节点树
说到 DOM, 就必须明白 DOM 将文档构建节点树的规则, HTML 大家都熟悉, 那就先来看下 DOM 节点树的组成.
DOM 节点树由节点构成, 而节点也是对象, 有以下几种类型:
1. 最基本的节点是 Node, 用于抽象的表示文档中一个独立的部分; 所有其他类型都继承自 Node.
2. Document 类型表示整个文档, 是一组分层节点的根节点. 在 JS 中, document 对象使 Document 的一个实例.
3. Element 节点表示文档中的所有 HTML 或 xml 元素, 可以用来操作这些元素的内容和特性.
4. 另外还有一些节点类型, 分别表示属性, 文本内容, 注释, 文档类型, CDATA 区域和文档片段.
其中我们最应该关心的的是 Element 节点, 这种节点与 HTML 中的标签一一对应, 此外, 文本节点与属性节点对我们操控文档也有着很大帮助.
刚刚提到节点也是对象, 这就说明了几个问题:
1. 每种节点都有其各自的属性和方法.
2. 节点之间除了家族关系 (层次关系) 外, 还可能有继承关系(这主要说的是抽象节点 Node 与其他类型的关系), 所以会有继承下来的共有属性与方法.
(一)Node 类型
Node 节点作为所有节点类型的超类, 定义了各类节点共享着的的相同属性和方法:
1. 每个节点都有的属性:
(1)NodeType 属性: 表明节点类型. 节点类型由在 Node 类型中定义的下列 12 个数值常量来表示, 任何节点类型必居其一.
类型 | nodeType 常数值 | 描述 |
---|---|---|
Node.ELEMENT_NODE | 1 | 元素节点 |
Node.ATTRIBUTE_NODE | 2 | 属性节点 |
Node.TEXT_NODE | 3 | 文本节点 |
Node.CDATA_SECTION_NODE | 4 | 字符数据节点(文本不会被解析器解析) |
Node.ENTITY_REFERENCE_NODE | 5 | 实体引用节点 |
Node.ENTITY_NODE | 6 | 实体节点 |
Node.PROCESSING_INSTRUCTION_NODE | 7 | 处理指令节点 |
Node.COMMENT_NODE | 8 | 注释节点 |
Node.DOCUMENT_NODE | 9 | 文档节点(DOM 树的根节点) |
Node.DOCUMENT_TYPE_NODE | 10 | 向为文档定义的实体提供接口 |
Node.DOCUMENT_FRAGMENT_NODE | 11 | 表示邻接节点和它们的子树。 |
Node.NOTATION_NODE | 12 | 代表一个符号在 DTD 中的声明 |
(2)childNodes 属性: 指向一个 NodeList 对象(包含一组同胞节点).NodeList 是一种类数组对象, 用于保存一组有序的节点, 可以通过位置来访问这些节点. NodeList 的独特之处在于, 他实际上是基于 DOM 结构动态执行查询的结果, 这种特性的好处是 DOM 结构的变化能够自动反映在 NodeList 对象中, 但也会产生一些问题, 之后我们会讲到, 主要是内存占用方面. 另外还有一种 HTMLCollection 对象, 和 NodeList 很类似, 主要区别在于 NodeList 保存所有类型的节点, HTMLCollection 只保存 Element 类型的节点, 以及多一个 namedItem 方法(传入 name 属性返回节点).
(3)parentNode,previousSibling,nextSibling 属性: 分别指向父节点, 前一个同胞节点, 后一个同胞节点.
2. 每个节点都有的方法:
(1)appendChild(): 用于向 childNodes 列表的末尾添加一个节点, 返回新增的节点.
(2)insertBefore(): 定位插入子节点, 返回新增的节点.
(3)replaceChild(): 替换节点, 返回被替换的节点. 技术上将, 这个是将旧节点的所有关系指针复制到新节点上, 同时删除自身关系, 这样旧节点就成了一个孤儿节点, 在文档中没有了自己的位置.
(4)removeChild(): 移除节点. 也是通过删除关系指针的方式.
(二)Document 类型
未完待续......
来源: http://www.bubuko.com/infodetail-2813289.html