【JS总结】——Document Object Model（DOM）

    上一篇说道BOM，了解了什么是浏览器对象模型，下面就来了解一个新的模型。

简介：

    DOM：文档对象模型，是W3C组织推荐的处理可扩展标识语言的标准编程接口。BOM——浏览器对象模型到现在为止还是谁用谁自己加条件，还没有人为它做一个通用的标准，但是习惯上，经常用DOM作为BOM的事实标准。

基本介绍：

1、节点

    加载HTML页面时，Web浏览器会生成一个树形结构，用HTML做界面时，也会涉及到树形结构。DOM将这种树形结构就理解为节点组成，这里面的每一层都是一个节点。

    其实节点就是HTML中的标签，标签有父标签、子标签，那么节点也有父节点和子节点，如图所示，head和body就是html的子节点，html就是head和body的父节点，而且html是没有父节点的，说明html这个节点在树形结构中层次是最高的。

2、节点分类

    如图，一个树形结构中有很多节点，就像大树有很多枝，它们分为营养枝和繁殖枝，繁殖枝是用来结种子繁殖后代的，营养枝是为了提供营养的。那么这些节点也有不同的分类，同样不同种类的节点功能也不同。

    节点共有三种：元素节点、文本节点、属性节点，根据名字其实也能大概了解这三种节点是什么样子的，

<span style="font-family:KaiTi_GB2312;font-size:18px;"><div title="标签">测试</div></span>

在这句HTML代码中，“div”就是元素节点，“title='标签'”就属于属性节点，“测试”就属于文本节点。

3、节点属性

    在DOM模型下，每个节点都有自己的属性，每个节点有三个属性，

信息节点属性

节点类型	nodeName	nodeType	nodeValue
元素	元素名称	1	null
属性	属性名称	2	属性值
文本	#text	3	文本内容（不包含html）

    除掉节点的基本属性，它还可以使用层次节点属性来获取与它相关的层次的节点。

层次节点属性

属性	说明
childNodes	获取当前元素节点的所有子节点
firstChild	获取当前元素节点的第一个子节点
lastChild	获取当前元素节点的最后一个子节点
ownerDocument	获取该节点的文档根节点，相当于Document
parentNode	获取当前节点的父节点
previousSibling	获取当前节点的前一个同级节点
nextSibling	获取当前节点的后一个同级节点
attributes	获取当前元素节点的所有属性节点集合

4、节点操作

    对于节点的定位，W3C给我们提供了很多方法，以便对元素的操作，下面就是操作的几种方法：

元素节点方法

方法	说明
getElementById()	获取特定ID的节点
getElementsByTagName()	获取相同元素的节点列表
getElementsByName()	获取相同名称的节点列表
getAttribute()	获取特定元素节点的属性值
setAttribute()	设置特定元素节点的属性值
removeAttribute()	移除特定元素节点属性

    由每个方法实现的功能也能看出，他们传入的参数不同，返回值也不同，每个方法都是传入相应的参数，来获得相应的返回值。

    DOM不仅仅可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点，每一种实现都有相应的方法：

操作方法

方法	说明
write()	这个方法可以把任意字符串插入到文档中
createElement()	创建一个元素节点
appendChild()	将新节点追加到子节点列表的末尾
createTextNode()	创建一个文件节点
insertBefore()	将新节点插入在前面
replaceChild()	用新节点替换旧节点
cloneNode()	复制节点
removeChild()	移除节点

总结

    DOM是JavaScript对网页元素的一个抽象，或者说它是一个网页中所有元素的集合，它涉及到网页中的每一个节点，并能对每一个节点进行操作，这些还都是基础，对于DOM进一步的学习，接下来再介绍。