DOM是Document Object Model 的缩写,即文档对象模型,是基于文档编程的一套API接口,使用时分三个方面:DOM Core(核心)、HTML-DOM和CSS-DOM。
DOM操作分类
1.DOM Core:
这不是JavaScript的专属品,任何一种支持DOM的编程语言都可以使用它,它的用途不仅限于处理一种使用标记语言编写出来的文档。
2.HTML DOM:
使用JavaScript和DOM为HTML文档编写脚本时,有许多专属的HTML-DOM属性,HTML-DOM出现的比DOM Core 更早,它提供了一些更简单的标记来描述各种HTML元素的属性,在使用DOM的某些对象时,两种都可以使用,相对于DOM Core获取对象、属性而言使用HTML-DOM代码较为简短,只是它的应用范围没有DOM Core广泛,仅适用于处理HTML文档。
3.CSS DOM:
是针对CSS的操作,在JavaScript中,CSS-DOM技术的主要作用是获取和设置style对象的各种属性,通过改变style的属性以达到各种效果。
节点和节点关系
DOM是以树状结构组织的HTML文档,在DOM中是这样规定的:
-
整个文档是一个文档节点
-
每个HTML标签是一个元素节点
- 包含在HTML元素中的文本是文本节点
- 每个HTML属性是一个属性节点
- 注释属于注释节点
文档节点结构图
把一个文档的各种元素想象成一颗家谱树,我们就可以用同样的术语描述DOM。不过,与使用“家谱树”这个术语相比,把文档称为“节点树”更准确。
节点:
节点(node)这个词是个网络术语,它表示网络中的一个连接点,一个网络就是由一些节点构成的集合。
DOM也是同样的情况。文档是由节点构成的集合,只不过此时的节点是文档树上的树枝和树叶而已。
在DOM里有许多不同类型的节点,其中有:元素节点、文本节点和属性节点。
元素节点:
DOM的原子是元素节点(element node)。
元素可以包含其他的元素。但事实上,没有被包含在其他元素里的唯一元素是<html>元素,它是我们的节点树的根元素。
文本节点:
当元素包含着文本时,那么它就是一个文本节点(text node)。文本节点是一个块类型而非行类型,当一个文本节点结束时其后面的元素都将在该元素的下一行。
属性节点:
属性节点用来对元素做出更具体的描述。
属性总是被放在起始标签里,所有属性节点总是包含在元素节点中。并非所有的元素都包含这属性,但所有的属性都被元素包含