JS之DOM

Posted wangxinwen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS之DOM相关的知识,希望对你有一定的参考价值。

一、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类型

 

 未完待续……

以上是关于JS之DOM的主要内容,如果未能解决你的问题,请参考以下文章

JS之DOM那些事

JS之DOM操作

js之DOM操作总结

js浏览器操作DOM之插入DOM

前端之JavaScript:JS之DOM对象三

JS之BOM与DOM