JavaScript—DOM

最新推荐文章于 2024-07-16 19:32:16 发布

林钟二五

最新推荐文章于 2024-07-16 19:32:16 发布

阅读量200

点赞数 1

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/weixin_44561640/article/details/97911222

版权

JavaWeb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、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接口
1.0	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 (*newnode, oldnode*)	Node	将childNodes中的**oldnode替换成newnode**
insertBefore (*newnode, refnode*)	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 用来获得实际的样式属性

*只能获取不能设置

林钟二五

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript—DOM

一、DOM简介•DOM（Document Object Model,文档对象模型）是一种独立于浏览器类型来表示文档的方法，它允许开发人员通过一组通用的对象、属性、方法和事件来访问文档，并通过脚本动态修改页面内容。•DOM是由W3C制定的标准，它为应用程序访问和操作HTML和XML文档提供了一个标准的API（应用程序编程接口）。二、DOM级别•根据W3C的DOM规范，DOM是HTML...
复制链接

扫一扫

专栏目录