上一篇说道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进一步的学习,接下来再介绍。