DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。为此DOM2和DOM3级分为许多模块，这些模块如下：

DOM2级核心；

DOM2级视图；

DOM2级事件；

DOM2级样式；

DOM2级遍历和范围；

DOM2级HTML。

一、DOM变化

DOM2级和3级的目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。

1.针对XML命名空间的变化

有了XML命名空间，不同的XML文档的元素就可以混在一起，共同构成良好的文档，而不必担心发生命名冲突。

命名空间要使用xmlns特性来指定。XHTML的命名空间是http://www.w3.org/1999/xhtml，在任何格式良好XHTML页面中，都应该将其包含在<html>元素中，如下面的例子所示：

<html  xmlns = “http://www.w3.org/1999/xhtml”>

<head>

<title>Example XHTML page</title>

</head>

<body>

Hello world!

</body>

</head>

对这个例子而言，其中的所有元素都默认被视为XHTML命名空间中的元素。想要明确地为XML命名空间创建前缀，可以使用xmlns后跟冒号，再后跟前缀，如下所示：

<xhtml:html xmlns:xhtml =”http://www.w3.org/1999/xhtml”>

<xhtml:head>

<xhtml:title>Example XHTML page</xhtml:title>

</xhtml:head>

<xhtml:body>

Hello world!

</xhtml:body>

</xhtml:html>

①Node类型的变化

在DOM2级中，Node类型包含下列特定于命名空间的属性。

localName：不带命名空间前缀的节点名称

namespaceURI：命名空间URI或者（在未指定的情况下是）null。

prefix：命名空间前缀或者（在未指定的情况下是）null。

DOM3级在此基础上更进一步，又引入了下列与命名空间有关的方法：

isDefaultNamespace(namespaceURI)：在指定的namespaceURI是当前节点的默认命名空间的情况下返回true。

lookupNamespaceURI(prefix)：返回给定prefix的命名空间。

lookupPrefix(namespaceURI)：返回给定namespaceURI的前缀。

②Document类型的变化

DOM2级中的Document类型也发生了变化，包含了下列与命名空间有关的方法：

createElementNS（namespaceURI，tagName）：使用给定的tagName创建一个属于命名空间namespaceURI的新元素。

createAttributeNS（namespaceURI，attributeName）：使用给定的attributeName创建一个属于命名空间namespaceURI的新特性。

getElementsByTagNameNS（namespaceURI，tagName）：返回属于命名空间namespaceURI的tagName元素的NodeList。

③Element类型的变化

DOM2级核心中有关Element的变化，主要涉及操作特性。新增的方法如下：

getAttributeNS（namespaceURI，localName）：取得属于命名空间namespaceURI且名为localName的特性。

getAttributeNodesNS（namespaceURI，localName）：取得属于命名空间namespaceURI且名为localName的特性节点。

getElementsByTagNameNS（namespaceURI，localName）：返回属于命名空间namespaceURI的tagName元素的NodeList。

has AttributeNS（namespaceURI，localName）：确定当前元素是否有一个名为localName的特性，而且该命名空间是namespaceURI。

removeAttributeNS（namespaceURI，localName）：删除属于命名空间namespaceURI且名为localName的特性。

setAttributeNS（namespaceURI，qualifiedName，value）：设置属于命名空间namespaceURI且名为qualifiedName的特性的值为value。

setAttributeNodeNS（attNode）：设置属于命名空间namespaceURI的特性节点。

④NamedNodeMap类型的变化

namedNodeMap类型也新增了下列与命名空间有关的方法。由于特性是通过NamedNodeMap表示的，因此这些方法多数情况下只针对特性使用。

getNamedItemNS（namespaceURI，localname）：取得命名空间namespaceURI且名为localName的项。

removeNamedItemNS（namespaceURI，localName）：移除属于命名空间namespaceURI且名为localName的项。

setNamedItemNS（node）：添加node，这个节点已经事先指定了命名空间信息。

2.其他方面的变化

①DocumentType类型的变化

DocumentType类型新增了3个属性：publicId、systemId和internalSubset。其中，前两个属性表示的是文档类型声明中的两个信息段，这两个信息段在DOM1级中是没有办法访问到的。

②Document类型的变化

Document类型的变化中唯一与命名空间无关的方法是importNode()。这个方法的用途是从一个文档中取得一个节点，然后将其导入到另一个文档，使其成为这个文档结构的一部分。

importNode()方法与Element的cloneNode方法非常相似，它接受两个参数：要复制的节点和一个表示是否复制子节点的布尔值。返回的结果是原来节点的副本，但能够在当前文档中使用。

③Node类型的变化

Node类型中唯一与命名空间无关的变化，就是添加了isSupported()方法。与DOM1级为document.implementation引入的hasFeature()方法类似，isSupported()方法用于确定当前节点具有什么能力。这个方法也接受相同的两个参数：特性名和特性版本号。如果浏览器实现了相应特性，而且能够基于给定节点执行该特性，isSupported()就返回true。

DOM3级引入了两个辅助比较节点的方法：isSameNode()和isEqualNode()。这两个方法都接受一个节点参数，并在传入节点与引用的节点相同或相等时返回true。所谓相同，指的是两个节点引用的是同一个对象。所谓相等，指的是两个节点是相同的类型，具有相等的属性，而且它们的attributes和childNodes属性也相等。

DOM3级还针对DOM节点添加额外数据引入了新方法。其中，setUserData()方法会将数据指定给节点，它接受3个参数：要设置的键、实际的数据和处理的函数。以下代码可以将数据指定给一个节点。

document.body.setUserData（”name”，”Nicholas”,function（）{ }）；

然后，使用getUserData（）并传入相同的键，就可以获得该数据，如下所示：

var value=document.body.getUserData（”name”）；

传入setUserData（）中的处理函数会在带有数据的节点被复制、删除、重命名或引入一个文档时调用，因而你可以事先决定在上述操作发生时如何处理用户数据。处理函数接受5个参数：表示操作类型的数值（1表示复制、2表示导入、3表示删除、4表示重命名）、数据键、数据值、源节点和目标节点。在删除节点时，源节点是null；除在复制节点时，目标节点均为null。在函数内部，你可以决定如何存储数据。

④框架的变化

框架和内嵌框架分别用HTMLFrameElement和HTMLFrameElement表示，它们在DOM2级中都有了一个新属性，名叫contentDocument。这个属性包含一个指针。指向表示框架内容的文档对象。

二、样式

1.访问元素的样式

任何支持style特性的HTML元素在javascript中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表嵌入样式表经层叠而来的样式。在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。对于使用短划线的CSS属性名，必须将其转换成驼峰大小写形式，才能通过javascript来访问。例如：CSS中的background-image属性对应的javascript属性为style.backgroundImage。

多数情况下，都可以通过简单地转换属性名的格式来实现转换。其中一个不能直接转换的CSS属性就是float。由于float是javascript中的保留字因此不能用作属性名。

①DOM样式属性和方法

“DOM2级样式”规范还为style对象定义了一些属性和方法。这些属性和方法提供元素的style特性值的同时，也可以修改样式。下面列出了这些属性和方法：

cssText：如前所述，通过它能够访问到style特性中的CSS代码。

length：应用给元素的CSS属性的数量。

parentRule：表示CSS信息的CSSRule对象。

getPropertyCSSValue（propertyName）：返回包含给定属性值的CSSValue对象。

getPropertyPriority（propertyName）：如果给定的属性使用了！important设置，则返回“！important”；否则，返回空字符串。

getPropertyValue（propertyName）：返回给定属性的字符串。

item（index）：返回给定位置的CSS属性的名称。

removeProperty（propertyName）：从样式中删除给定属性。

setProperty（propertyName，value，priority）：将给定属性设置为相应的值，并加上优先权标志（“important”或者一个空字符串）。

②计算的样式

“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接收两个参数：要取得计算机样式的元素和一个伪元素字符串，如“：after”，如果不需要伪元素信息，第二个参数可以是null。返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。例如：

<!DOCTYPE html>

<html>

<head>

<title>Computed Style Example</title>

<style type="text/css">

#myDiv{

background-color: blue;

width: 100px;

height: 200px;

}

</style>

</head>

<body>

<div id="myDiv" style="background-color:red;border:1px solid black"></div>

</body>

</html>

以下代码取得这个元素计算后的样式：

var myDiv=document.getElementById(“myDiv”) ;

var computedStyle = document.defaultView.getComputedStyle(myDiv , null) ;

alert(computedStyle.backgroundColor) ;     // ”red”

alert(computedStyle.width) ;              // “100px”

alert(computedStyle.height) ;              //”200px”

alert(computedStyle.border) ;              //在某些浏览器中是”1px solid black”

需要注意的是：所有计算的样式都是只读的；不能修改计算后样式对象中的CSS属性。此外，计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值的CSS属性都会表现在计算后的样式中。

2.操作样式表

CSSStyleSheet类型表示的是样式表，以下代码可以确定浏览器是否支持DOM2级样式表：

var supportsDOM2StyleSheets =

document.implementation.hasFeature(“StyleSheets”, “2.0”) ;

CSSStyleSheet继承自StyleSheet，后者可以作为一个基础接口来定义非CSS样式表。

①CSS规则

CSSRule对象表示样式表中的每一条规则。CSSRule是一个供其他多种类型继承的基类型，其中最常见的就是CSSStyleRule类型，表示样式信息。

②创建规则

DOM规定，要向现有样式表中添加新规则，需要使用insetRule()方法。这个方法接受两个参数：规则文本和表示在哪里插入规则的索引。下面是一个例子：

sheet.insertRule(“body { background-color : silver }” , 0 ) ;   //DOM方法。

这个例子插入的规则会改变元素的背景颜色。插入的规则将成为样式表中的第一条规则。

IE及更早版本支持一个类似的方法，名叫addRule()，也接受两必选参数：选择符文本和CSS样式信息；一个可选参数：插入规则的位置。例如：

sheet.addRule(“body” , “background-color : silver” , 0 ) ;      // 仅对IE有效

要以跨浏览器的方式向样式表中插入规则，可以使用下面的函数。这个函数接受4个参数：要向其中添加规则的样式表以及与addRule()相同的3个参数。下面是调用这个函数的代码：

insertRule(document.styleSheets[0] , “body”, “background-color : silver” , 0) ;

③删除规则

从样式表中删除规则的方法是deleteRule()，这个方法接受一个参数：要删除的规则的位置。例如，要删除样式表中的第一条规则，可以使用以下代码：

sheet.deleteRule(0);       //DOM方法

IE支持类似的方法叫做removeRule()，使用方法相同，如下所示：

sheet.removeRule(0)；    //仅对IE有效

下面是一个能够跨浏览器删除规则的函数，第一个参数是要操作的样式表，第二个参数是要删除的规则的索引。

调用这个方法如下：

deleteRule(document.styleSheets[0] , 0) ;

3.元素大小

①偏移量

元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小。通过下列4个属性可以取得元素的偏移量：

offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、水平滚动条的高度、上边框高度和下边框高度。

offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、垂直滚动条的宽度、左边宽度和右边框宽度。

offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等。

②客户区大小

元素的客户区大小，指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个：clientWidth和clientHeight。其中，clientWidth属性时元素内容区宽度加上左右内边距宽度；clientHeight属性时元素内容区高度加上上下内边距高度。

③滚动大小

指的是包含滚动内容的元素的大小。以下是4个与滚动大小相关的属性

scrollHeight：在没有滚动条的情况下，元素内容的总高度。

scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollWidth和scrollHeight主要用于确定元素内容的实际大小。

④确定元素大小

getBoundingClientRect（）方法。这个方法会返回一个矩形对象，包含4个属性：left、top、right、bottom。这些属性给出了元素在页面中相对于视口的位置。

三、遍历

“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先的遍历操作。遍历以给定节点为根，不可能向上超出DOM树的根节点。

1.NodeIterator

Nodelterator类型是两者中比较简单的一个，可以使用document.createNodeIterator()方法创建它的新实例。这个方法接受4个参数：

root：想要作为搜索起点的树中的节点。

whatToShow：表示要访问哪些节点的数字代码

filter：是一个NodeFilter对象，或者一个表示应该接受还是拒绝某种特定节点的函数。

entityReferenceExpansion：布尔值，表示是否要扩展实体引用。

whatToShow参数是一个位掩码，通过应用一或多个过滤器来确定要访问哪些节点。

Nodelterator类型的两个方法是nextNode()和previousNode()。顾名思义，在深度优先的DOM子树遍历中，nextNode()方法用于向前前进一步，而previousNode()用于向后后退一步。

2.TreeWalker

TreeWalker是NodeIterator的一个更高级的版本。除了包括nextNode()和previousNode()在内的相同的功能之外，这个类型还提供了下列用于在不同方向上遍历DOM结构的方法：

parentNode()：遍历到当前节点的父节点；

firstChild()：遍历到当前节点的第一个子节点；

lastChild()：遍历到当前节点的最后一个子节点；

nextSibling()：遍历到当前节点的下一个同辈节点；

previousSibling()：遍历到当前节点的上一个同辈节点。

创建TreeWalker对象要使用document.createTreeWalker( )方法，这个方法接受4个参数与document.createNodeIterator( )方法相同：作为遍历起点的根节点、要显示的节点类型、过滤器和一个表示是否扩展实体引用的布尔值。由于这两个创建方法很相似，所以很容易用TreeWalker来代替NodeIterator。

4.范围

（1）DOM中的范围

DOM2级在Document类型中定义了createRange( )方法。在兼容DOM的浏览器中，这个方法属于document对象。使用hasFeature（）或者直接检测该方法，都可以确定浏览器是否支持范围。如果浏览器支持范围，那么就可以使用createRange()来创建DOM范围。

①用DOM范围实现简单选择

要使用范围来选择文档中的一部分，最简单的方式就是使用selectNode()或selectNodeContents()。这两个方法都接受一个参数：一个DOM节点。其中，selectNode()方法选择整个节点，包括其子节点；而selectNodeContents()方法则只选择节点的子节点。

②用DOM范围实现复杂选项

要创建复杂范围就得使用setStart()和setEnd()方法。这两个方法都接受两个参数：一个参照节点和一个偏移量值。对setStart()来说，参照节点会变成：startContainer，而偏移量值会变成startOffset。对于setEnd()来说，参照节点会变成endContainer，而偏移量值会变成endOffset。

③操作DOM范围中的内容

在创建范围时，内部会为这个范围创建一个文档片段，范围所属的全部节点都被添加到了这个文档片段中。为了创建这个文档片段，范围内容的格式必须正确有效。

第一个方法：deleteContents()。这个方法能够从文档中删除范围所包含的内容。例如：

var p1 = document.getElementById(“p1”) ;

helloNode = p1.firstChild.firstChild ;

worldNode = p1.lastChild ;

range = document.createRange() ;

range = setStart(helloNode , 2 ) ;

range = setEnd(worldNode , 3 ) ;

range.deleteContents( ) ;

执行以上代码后，页面中会显示如下HTML代码：

<p><b>He</b>rld!</p>

与deleteContents()方法相似，extractContents()也会从文档中移除范围选区。但这两个方法的区别在于，extractContents()会返回范围的文档片段。利用这个返回值，可以将范围的内容插入到文档中的其他地方。

还有一种做法，即使用cloneContents()创建范围对象的一个副本，然后在文档的其他地方插入该副本。

④插入DOM范围中的内容

使用insertNode（）方法可以向范围选区的开始处插入一个节点。

使用surroundContents（）方法可以环绕范围插入内容，这个方法接收一个参数，即环绕范围内容的节点，在环绕范围插入内容时，后台会执行下列步骤：

提取出范围中的内容；

将给定节点插入到文档中原来范围所在的位置上；

将文档片段的内容添加到给定节点中。

⑤折叠DOM范围

所谓折叠范围， 就是指范围中未选择文档的任何部分。

使用collapse()方法来折叠范围，这个方法接收一个参数，一个布尔值，表示要折叠到范围的哪一端。参数true表示折叠刀范围的起点，参数false表示折叠刀范围的终点。要确定范围已经折叠完毕，可以检查collapsed属性，如下所示：

range.collapse(true) ;          //折叠到起点

alert(range.collapsed) ;         //输出true

⑥比较DOM范围

在多个范围的情况下，可以使用compareBoundaryPoints（）方法来确定这些范围是否有公共的边界。这个方法接受两个参数：表示比较方式的常量值和要比较的范围。

⑦复制DOM范围

可以使用cloneRange()方法复制范围。这个方法会创建调用它的范围的一个副本。

var newRange = range.cloneRange()；

新创建的范围与原来的范围包含相同的属性，而修改它的端点不会影响原来的范围。

⑧清理DOM范围

使用完范围之后，最好是调用detach()方法，以便从创建范围的文档中分离出该范围。调用detach()之后，就可以放心地解除对范围的引用，从而让垃圾回收机制回收其内存了。

（2）IE8及更早版本的范围

①用IE范围实现简单的选择

选择页面中某一区域的最简单方式，就是使用范围的findText()方法。这个方法会找到第一次出现的给定文本，并将范围移过来以环绕该文本。

②使用IE范围实现复杂的选择

在IE中创建复杂范围的方法，就是以特定的增量向四周移动范围。为此，IE提供了4个方法：move（）、moveStart（）、moveEnd（）、expand（）。这些方法都接受两个参数：移动单位和移动单位的数量。

③操作IE范围中的内容

在IE中操作范围中的内容可以使用text属性或pasteHTML（）方法。如前所述，通过text属性可以取得范围中的内容文本；但是，也可以通过这个属性设置范围中的内容文本。

④折叠IE范围

IE为范围提供的collapse（）方法与相应的DOM方法用法一样。

⑤比较IE范围

IE中的compareEndPoints（）方法与DOM范围的compareBoundaryPoints（）方法类似。这个方法接受两个参数：比较的类型和要比较的范围。

⑥复制IE范围

在IE中使用duplicate（）方法可以复制文本范围，结果会创建原范围的一个副本，如下面的例子所示：

var newRange = range.duplicate() ;

新创建的范围会带有与原范围完全相同的属性。

JavaScript高级程序设计：第十二章的更多相关文章

  1. 读书笔记 - js高级程序设计 - 第十二章 DOM2和DOM3

      Node类型的变化   访问元素的样式 myDiv.style.backgroundColor = "red" myDiv.style.width = "100px& ...

  2. 《JAVASCRIPT高级程序设计》第三章

    <JAVASCRIPT高级程序设计>第三章主要讲述了这门语言的基础概念,内容多而浅,通过思维导图可以帮助我们很好的理清脉络. js函数使用function关键字来声明,以下是一个简单的例子 ...

  3. 《JavaScript高级程序设计》笔记——第一章到第三章

    2019年,新年伊始,我打算好好重读一下<JavaScript高级程序设计>这本前端必备经典书.每天半小时. 以下内容摘自<JavaScript高级程序设计> 2019-2-1 ...

  4. 读书笔记 - js高级程序设计 - 第十五章 使用Canvas绘图

    读书笔记 - js高级程序设计 - 第十三章 事件   canvas 具备绘图能力的2D上下文 及文本API 很多浏览器对WebGL的3D上下文支持还不够好   有时候即使浏览器支持,操作系统如果缺缺 ...

  5. 《JavaScript高级程序设计》——第三章 基本概念

    这章讲了JavaScript的语法.数据类型.流控制语句和函数.理解还是挺好理解的,但有很多和C.C++.Java不同的地方需要记忆.比如, JavaScript标识符可以由Unicode字符字符组成 ...

  6. JavaScript高级程序设计：第十三章

    第十三章 一.理解事件流 事件流描述的是从页面中接收事件的顺序. 1.事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点.以下面的HTML页面为例: ...

  7. JavaScript高级程序设计：第六章

    第六章 面向对象的程序设计 一.理解对象 1.属性类型: ECMAScript中有两种属性:数据属性和访问器属性. (1)数据属性: 数据属性包含一个数据值的位置.在这个位置可以读取和写入值.数据属性 ...

  8. JavaScript高级程序设计：第二十一章

    第二十一章 Ajax与Comet 一.XMLHttpRequest对象 1.XHT的用法 在使用XHR对象时,要调用的第一个方法时open( ),它接受3个参数:要发送的请求的类型.请求的URL和表示 ...

  9. JavaScript高级程序设计：第十七章

    错误处理与调试 一.错误处理 1.try-catch语句: ECMA-262第3版引入了try-catch语句,作为javascript中处理异常的一种标准方式.基本的语法如下: try { //可能 ...

  10. JavaScript高级程序设计：第五章

    引用类型 一.object类型: 创建object实例的方式有两种.第一种是使用new操作符后跟Object构造函数,如下所示: var  person = new  Object(): person ...

随机推荐

  1. Struts2 Spring3 Hibernate3 集成xml版本

    Struts2 Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与视图的数据交互 ...

  2. windows线程池四种情形（win核心读书笔记）

    windows线程池四种情形(win核心读书笔记) Mircosoft从Windows2000引入线程池API,并在Vista后对线程池重新构架,引入新的线程池API.以下所有线程池函数均适用于Vis ...

  3. 【MySQL】filesort.cc 源代码阅读笔记

    最近阅读了部分MySQL排序的代码,把心得记录一下. 参考代码 MySQL: 文件: filesort.cc 函数: filesort() 排序过程伪代码 function filesort(tabl ...

  4. CSU 1333 Funny Car Racing

    最短路问题稍微复杂了一点,松弛的时候多判断一些条件就可以了.第一次用SPFA写最短路. #include<cstdio> #include<cmath> #include< ...

  5. 实时计算storm流程架构总结

    hadoop一般用在离线的分析计算中,而storm区别于hadoop,用在实时的流式计算中,被广泛用来进行实时日志处理.实时统计.实时风控等场景,当然也可以用在对数据进行实时初步的加工,存储到分布式数 ...

  6. js正则函数中test和match的区别

    test是RegExp的方法,参数是字符串,返回值是boolean类型. match是String的方法,参数是正则表达式,返回值是数组. <script type="text/jav ...

  7. 记2016商大ACM省赛

    比赛前三天才得到省赛的非正式参赛名额,总有点哭笑不得,笑的是是我的终究是我的,跑不掉…… 哭的是现在就剩三天了,虽然最近也一直在参加训练赛,但一直是断断续续的,对自己现在的水平并没有太大的信心…… 虽 ...

  8. JQuery 阻止事件冒泡

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){  ...

  9. photoshop的页面制作练习1

  10. sftp配置多用户权限

    sftp配置多用户权限   工作需要,用户上传文件到目录下,用ftp不太安全,选择sftp.让用户在自己的home目录下活动,不能ssh到机器进行操作.   下面开始干活. 查看ssh版本 ssh - ...