DOM详解——精选推荐
- 格式：pdf
- 大小：183.41 KB
- 文档页数：4
DOM详解
⼀、简介
DOM即（Document Object Model）：⽂档对象模型，⽤来将标记型⽂档封装成对象，并将标记型⽂档中的所有内容（标签、⽂本、属性
等）都封装成对象。即标记型⽂档的⼀种解析⽅式。因为封装为对象就可以对其中的属性和⾏为进⾏调⽤，以便于对这些⽂档及⽂档中的内
容进⾏更⽅便的操作。
DOM解析⽅式：将标记型⽂档解析为⼀颗dom树，⽽树中的内容都封装为节点对象。
按照标签的层次关系体现出标签的所属，形成⼀个树状结构。所以我们将DOM解析⽂档形成的document对象称为dom树，⽽树中的标签以
及⽂本甚⾄属性称为节点。这个节点也称为对象。标签通常也称为页⾯中的元素。
注意：这个DOM解析的好处是可以对树中的节点进⾏任意操作，如增删查改。但也有弊端：这种解析需要将标记型⽂档加载进内存。意味着如果⽂档体积很⼤时较为浪费空间。
⼆、另⼀种解析⽅式：SAX
是由⼀些组织定义的⼀种民间常⽤的解析⽅式，并不是w3c标准，⽽DOM是w3c的标准。SAX的解析⽅式：基于事件驱动的解析。好处：获取数据的速度快。弊端：不遵从增删查改操作。
三、DOM三种模型
DOM level 1：将html⽂档封装成对象。
DOM level 2：在level1的基础上加⼊了新功能，⽐如解析名称空间。DOM level 3：将xml⽂档封装成了对象。
四、DHTML:动态html
不是⼀门语⾔，⽽是多项技术综合体的简称，这些技术包括HTML、CSS、DOM、JavaScript。
四种技术(语⾔)在动态html中扮演的⾓⾊：
HTML:⽤标签封装数据。即负责提供标签，对数据进⾏封装，⽬的是便于对该标签中的数据进⾏操作。
CSS：对数据样式进⾏定义。即负责提供样式属性，对标签中的数据进⾏样式的定义。
DOM：将⽂档和标签等所有内容进⾏解析。即负责将标记型⽂档及⽂档中的内容进⾏解析。并封装成对象，在对象中定义了更多的属性和
⾏为，便于对对象进⾏操作。
JS:对页⾯⾏为进⾏定义（页⾯动态效果）。即负责提供程序设计语⾔，对页⾯中的对象进⾏逻辑操作。所以JavaScript是DHTML的主⼒编程语⾔。
五、BOM：Browser Object Model（浏览器对象模型）
这个模型⽅便于操作浏览器。浏览器对应的对象就是Window对象。
六、获取节点对象
DOM将标记型⽂档封装为了document对象，⽽⽂档中的内容封装成了节点对象。常见的节点对象有：标签、属性、⽂本。
获取节点对象的⽅法：⽅式⼀：通过id获取：getElementByID();
1
11
12
View Code⽅式⼆：通过name属性获取节点(因为name可以相同，所以返回的是⼀个数组)getElementsByName();
1
12
13
14
View Code⽅式三：对所以标签都适⽤的⽅法：像这样的标签既没有id，也没有name，就可以直接通过标签名来获取：getElementsByTagName();
1
12 13 W3C官⽹
14 博客园主页
View Code
七、通过节点层次关系获取节点
节点的层次关系：
1、⽗节点：parentNode(⼀个⽗节点)
2、⼦节点：childNodes(若⼲个⼦节点)
3、兄弟节点：上⼀个兄弟节点：previousSibling；下⼀个兄弟节点：nextSibling⼋、节点的⼀般操作1、创建并添加
2、删除节点
3、替换&克隆节点
1
2
3
4
5 节点的⼀般操作
6
38
39
40
41
81
82
83
84
