一、DOM简介
•DOM(Document Object Model,文档对象模型)是一种独立于浏览器类型来表示文档的方法,它允许开发人员通过一组通用的对象、属性、方法和事件来访问文档,并通过脚本动态修改页面内容。
•DOM是由W3C制定的标准,它为应用程序访问和操作HTML和XML文档提供了一个标准的API(应用程序编程接口)。
二、DOM级别
•根据W3C的DOM规范,DOM是HTML与XML的应用编程接口,DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。
☞ DOM 1级:DOM1级(DOM Level 1)于1998年10月成为W3C的推荐标准。DOM1级由两个模块组成:DOM核心(DOM Core)和DOM HTML。其中,DOM核心规定的是如何映射基于XML的文档结构,以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展,添加了针对HTML的对象和方法。
☞ DOM 2级:如果说DOM 1级的目标主要是映射文档的结构,那么DOM 2级的目标就要宽泛多了。DOM2级在原来DOM的基础上又扩充了鼠标和用户界面事件、范围、遍历(迭代DOM文档的方法)等细分模块,而且通过对象接口增加了对CSS(层叠样式表)的支持。DOM 1级中的DOM核心模块也经过扩展开始支持XML命名空间。
2级DOM模型引进了几个新DOM模型模块来处理新的接口类型:
DOM视图(DOM Level 2 Views ):描述跟踪一个文档的各种视图(使用CSS样式设计文档前后)的接口;
DOM事件(DOM Level 2 Events):描述事件接口;
DOM样式( DOM Level 2 Style ):描述处理基于CSS样式的接口;
DOM遍历与范围(DOM Level 2 Traversal and Range ):描述遍历和操作文档树的接口;
☞ DOM 3级:DOM 3级则进一步扩展了DOM,引入了以统一方式加载和保存文档的方法--在DOM加载和保存(DOM Load and Save)模块中定义;新增了验证文档的方法--在DOM验证(DOM Validation)模块中定义。DOM3级也对DOM核心进行了扩展,开始支持XML 1.0规范,涉及XML Infoset、XPath和XML Base。
•Web浏览器对DOM的支持:
☞在DOM标准出现了一段时间之后,Web浏览器才开始实现它。微软在IE5中首次尝试实现DOM,但直到IE5.5才算是真正支持DOM 1级。在随后的IE6和IE7中,微软都没有引入新的DOM功能,而到了IE8才对以前DOM实现中的bug进行了修复。
☞Netscape直到Netscape 6(Mozilla 0.6.0)才开始支持DOM。在Netscape 7之后,Mozilla把开发重心转向了Firefox浏览器。Firefox 3完全支持DOM 1级,几乎完全支持DOM 2级,甚至还支持DOM 3级的一部分。
☞目前,支持DOM已经成为浏览器开发商的首要目标,主流浏览器每次发布新版本都会改进对DOM的支持。下表列出了主流浏览器对DOM标准的支持情况。
浏 览 器 | DOM兼容性 |
Netscape Navigator 1. ~ 4.x | — |
Netscape 6+ (Mozilla 0.6.0+) | 1级、2级(几乎全部)、3级(部分) |
IE2~IE4.x | — |
IE5 | 1级(最小限度) |
IE5.5~IE8 | 1级(几乎全部) |
IE9+ | 1级、2级、3级 |
Opera 1~6 | — |
Opera 7~8.x | 1级(几乎全部)、2级(部分) |
Opera 9~9.9 | 1级、2级(几乎全部)、3级(部分) |
Opera 10+ | 1级、2级、3级(部分) |
Safari 1.0.x | 1级 |
Safari 2+ | 1级、2级(部分) |
Chrome 1+ | 1级、2级(部分) |
Firefox 1+ | 1级、2级(几乎全部)、3级(部分) |
•如何检测Web浏览器对DOM的支持:
☞ 在JavaScript中可以使用implementation.hasFeature方法检查浏览器的DOM兼容性,例如下面代码可以检查浏览器是否支持DOM Level 1的HTML特性:
var s=document.implementation.hasFeature(“HTML”,”1.0”);
•下表给出了DOM的标准特性及其说明
版本 | 特性 | 说明 |
1.0 | HTML | 核心与HTML接口 |
XML | 核心与XML接口 | |
2.0 | Core | 核心接口 |
HTML | HTML接口 | |
XML | XML接口 | |
Views | 基于特定样式完成对文档的格式化 | |
StyleSheets | 为文档关联样式表 | |
CSS | 对CSS1的支持 | |
CSS2 | 对CSS2的支持 | |
Events | 通用DOM事件 | |
UIEvents | 用户界面事件 | |
MouseEvents | 鼠标事件 | |
HTMLEvents | HTML4.01事件 | |
MutationEvents | DOM树发生改变是触发的事件 | |
Range | 对DOM树中的特定范围进行操作 | |
Traversal | 遍历DOM树 | |
3.0 | Core | 核心接口 |
XML | XML接口 | |
LS | 在文件和DOM树之间同步地加载和存储 | |
LS-Async | 在文件和DOM树之间异步地加载和存储 | |
Validation | 在确保有效的前提下修改DOM树的方法 |
三、DOM的节点层次
•DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型,每种类型分别表示文档中不同的信息或标记。每个节点都拥有各自的特点、数据和方法,另外也与其他节点存在某种关系。节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构。
以下面的文档为例:
•它可以用以下的DOM树来描述:
•在这个DOM树中,文档节点(document)是根节点,文档节点只有一个子节点,即<html>元素,我们称之为文档元素(用document的documentElement属性表示) 。文档元素是文档的最外层元素,文档中的其他元素都包含在文档元素中。HTML中的每一个标记都可以通过DOM树中的一个节点来表示:元素(element)通过元素节点表示,特性(attribute)通过特性节点表示,注释(comment)通过注释节点表示。在DOM标准中,一共定义了12种节点类型。
•节点类型:DOM定义了一个Node接口以及很多节点类型来表示DOM树中的各个节点。Node接口中定义了12个常量,它们分别代表了DOM标准中12种节点类型,所有DOM节点都可以通过nodeType属性获取器节点类型信息。
下表给出了这12种类型的定义及说明:
节点接口 | noteType常量(值) | 含义 |
Element | Node.ELEMENT_NODE(1) | Element接口代表文档中的一个元素,元素可以带有关联的属性,对应着HMTL文档中标签内部的内容。 |
Attr | Node.ATTRIBUTE_NODE(2) | Attr接口代表Element对象的一个属性。 |
Text | Node.TEXT_NODE(3) | Text接口代表Element对象或者Attr对象中的文本内容。 |
CDATASection | Node.CDATA_SECTION_NODE(4) | CDATASection接口代表<![CDATA[…]]>标签内部的文本块。 |
EntityReference | Node.ENTITY_REFERENCE_NODE(5) | EntityReference接口代表文档中的实体引用节点,例如:"代表双引号的实体引用。 |
Entity | Node.ENTITY_NODE(6) | Entity代表DTD中的一个实体定义。 |
ProcessingInstruction | Node.PROCESSING_INSTRUCTION_ NODE(7) | ProcessingInstruction代表一个物理指令。 |
Comment | Node.COMMENT_NODE(8) | Comment接口代表文档中的一段注释。 |
Document | Node.DOCUMENT_NODE(9) | Document接口代表文档的顶层节点。 |
DocumentType | Node.DOCUMENT_TYPE_NODE(10) | DocumentType接口代表文档的DTD引用,使用<!DOCTYPE>标签可以再文档中添加DTD引用。 |
DocumentFragment | Node.DOCUMENT_FRAGMENT_ NODE(11) | DocumentFragment接口代表文档的一个片段。 |
Notation | Node.NOTATION_NODE(12) | Notation接口代表DTD中定义的标记。 |
•上述节点中,最常用的有两种:
☞ 元素节点(Element)
☞ 文本节点(Text)
• 除节点外,DOM还定义了一些助手对象,它们可以和节点一起用,但不是DOM文档必有的部分。
☞ NodeList--节点数组,按照数值进行索引;用来表示和一个元素的子节点。
☞ NamedNodeMap--同时使用数值和名字进行索引的节点表,用于表示元素特性。
•Node接口也定义了一些所有节点类型都包含的特性和方法:
特性/方法 | 类型/返回类型 | 说 明 |
nodeName | String | 节点的名字;根据节点的类型而定义 |
nodeValue | String | 节点的值;根据节点的类型而定义 |
nodeType | Number | 节点的类型常量值之一 |
ownerDocument | Document | 指向这个节点所属的文档 |
firstChild | Node | 指向在childNodes列表中的第一个节点 |
lastChild | Node | 指向在childNodes列表中的最后一个节点 |
childNodes | NodeList | 所有子节点的列表 |
previousSibling | Node | 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null |
nextSibling | Node | 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为null |
hasChildNodes() | Boolean | 当childNodes包含一个或多个节点时,返回真 |
attributes | NamedNodeMap | 包含了代表一个元素的特性的Attr对象;仅用于Element节点 |
appendChild(node) | Node | 将node添加到childNodes的末尾 |
removeChild(node) | Node | 从childNodes中删除node |
replaceChild | Node | 将childNodes中的oldnode替换成newnode |
insertBefore | Node | 在childNodes中的refnode之前插入newnode |
四、使用DOM
•访问指定节点
•访问相关节点
•访问节点属性
•检查节点类型
•创建节点
•操作节点
•访问指定节点:已知某个节点的某个属性(如id、name),在DOM树中寻找符合条件的节点。相关的方法包括:getElementById()、getElementsByName()和getElementsByTagName()。
☞ getElementById()方法:返回对拥有指定ID 的第一个对象的引用,应用该方法可以根据传入的id参数返回指定的元素节点。在HTML文档中,元素的ID属性是该元素对象的唯一标识,因此getElementById()方法是最快的节点访问方法。
*需要注意的是:IE7及其更低版本在实现getElementById()方法是存在一个缺陷,那就是如果某个元素的name属性与getElementById()方法的参数值相同, getElementById()方法会返回该元素。但在其后续版本中已更正此bug,当然,最后的做法是:建议web开发人员将name和id属性设置为相同的值,从而确保getElementById()方法在各种浏览器中返回相同的结果。
* 另外,getElementById()方法中接收的参数ID是严格区分大小写的,使用时务必要注意。
☞ getElementsByName()方法:该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所以getElementsByName() 方法返回的是一个包含若干个元素的数组,而不是一个元素。
*在IE7及其更低版本中,getElementsByName()方法存在与getElementById()方法类似的bug,它也会同时匹配元素的name和id属性,使用时需要特别注意。
☞ getElementsByTagName()方法:该方法返回带有指定标签名的对象的集合。getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
*递给 getElementsByTagName() 方法的字符串不区分大小写。
document对象
•document对象的常用属性
title — 设置文档标题,等价于HTML的title标签
bgColor — 设置页面背景色
fgColor — 设置前景色(文本颜色)
linkColor — 未点击过的链接颜色
alinkColor — 激活链接(焦点在此链接上)的颜色
vlinkColor — 已点击过的链接颜色
URL — 设置URL属性,从而在同一窗口打开另一网页
cookie — 设置和读出cookie
•document对象的常用方法
write() — 在文档中写入字符串
writeln() —在文档中写入字符串,并在字符串的末尾增加一个换行符(\n)
open() — 打开文档流
close() — 关闭文档流
getElementById() —返回对拥有指定 id 的第一个对象的引用 getElementByName() —返回带有指定名称的对象集合
getElementByTagName() —返回带有指定标签名的对象集合 creatElement() — 创建一个元素节点
appendChild() — 添加子节点
……
•document对象中元素的集合
all—返回文档中所有对象的集合(仅适用于IE)
forms—返回文档中所有表单对象的引用。
可以有两种形式来访问表单对象
A、通过下标形式访问:
如:document.forms[0].name
B、通过name形式访问:
如:document.forms[“myform”].text1.value
anchors—返回文档中所有超链接对象的引用。
images—返回文档中所有img对象的引用。
links—返回文档中所有area和link对象的引用。
对文档对象的内容、属性、样式的操作
•一、操作内容
1、innerHTML— 用来设置或获取对象起始和结束标签内的内容。(识别HTML标签)
2、innerText—用来设置或获取对象起始和结束标签内的文本内容。(不识别HTML标签,适用于IE)
textContent—用来设置或获取对象起始和结束标签内的文本内容。(不识别HTML标签,适用于Firfox)
3、outerHTML—用来设置或获取包含本对象起始和结束标签在内的内容。(识别HTML标签)
outerText—设置(包括标签)或获取(不包括标签)对象的文本 。 innerText和outerText在获取时是相同效果,但在设置时,innerText仅设置标签内的文本,而outerText设置包括标签在内的文本。(适用于IE)
•二、操作属性
1、直接操作方式
对象.属性
对象.属性=值 (设置、获取、添加属性)
2、使用DOM提供的方法
getAttribute(属性名称) —获取给定的属性的值
setAttribute(属性名称,属性值) —设置或添加属性
removeAttribute(属性名称) —删除节点属性
•三、操作样式
1、行内样式
对象.style.属性
对象.style.属性=值 (设置、获取、添加样式属性)
如 var p1=document.getElementById(“text1");
p1.style.color=“blue”;
p1.style.fontSize=“16px”;
p1.style.backgoundColor=“red”;
*遇到属性是“-”连接的,要将“-"去掉,后面的单词的首字母大写。
•三、操作样式
2、CSS层叠样式
(1)通过id来更改样式
对象.id=样式名称 例题5-11.html
(2)通过className来更改样式
对象.className=样式名称 例题5-12.html
(3)更改或者设置某个属性的值
IE) document.styleSheets[下标].rules[下标].style.属性
document.styleSheets[下标].rules[下标].style.属性=值
(FF)document.styleSheets[下标].cssRules[下标].style.属性
document.styleSheets[下标].cssRules[下标].style.属性=值
•三、操作样式
说明:document.styleSheets 样式表的集合
document.styleSheets[下标].rules 样式规则的列表
document.styleSheets[0].rules.style 样式规则的集合
(4)动态的添加删除css样式规则
(FF) 添加:document.styleSheets[下标].insertRule("选择器{属性:值}",位置)
删除:document.styleSheets[下标].deleteRule(位置)
(IE) 添加:document.styleSheets[下标].addRule("选择器","属性:值",位置)
删除:document.styleSheets[下标].removeRule(位置)
•三、操作样式
3、行内样式和css层叠样式通用的方式
对象.currentStyle.属性 IE 用来获得实际的样式属性
getComputedStyle(对象,null) FF 用来获得实际的样式属性
*只能获取不能设置