js012-DO2和DOM3

js012-DO2和DOM3

本章内容：

DOM2和DOM3的变化

操作样式的ODM API

DOM 遍历与范围

DOM2级核心：在一级核心基础上构建，为节点添加了更多方法和属性

DOM2级视图：为文档定义了基于样式信息的不同视图

DOM2级事件：说明了如何使用事件与DOM文档交互

DOM2级样式：定义如何以变成方式来访问和改变css样式信息

DOM2级HTML：在1级HTML基础上构建，添加更多属性、方法和新接口

12.1 DOM变化

12.1.1针对XML命名空间的变化

1、node类型的变化

2、document类型的变化

3、element类型的变化

4、namenodemap类型的变化

12.1.2其他方面的变化

1、documenttype类型的变化

documenttype类型新增了3个属性：publicId、systemId、internalSubset。

publicId、systemId、表示文档类型声明的两个信息段。internalSubset用于访问包含在文档了诶性声明的额外定义。

2、document类型的变化

document类型的变化中唯一与命名空间无关的方法时importNode()。该方法用途时从一个文档中取得一个节点，然后将其导入到另一个文档，使其成为该文档的一部分。。每个节点都有一个ownerDocument属性，表示所属的文档。

3、node类型的变化

node类型中唯一与命名空间无关的变化就是添加了isSupported()方法。

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

document.body.setUserData("name", "meimei", function(){});

然后使用getUserData()，并传入相同的键就可以取得该数据。

var value = document.body.getUserData("name");

传入setUserData()中处理的函数会在带有数据的节点被复制、删除、重命名、引入一个文档时调用。处理函数接收5个参数：表示操作类型的数值（1、复制，2、导入，3、删除，4、重命名）、数据键、数据值、源节点、和目标节点

4、框架的变化

框架和内嵌框架分别使用HTMLFrameElement和HTMLIFrameElement表示。他们在DOM2级中都有一个新的属性：contentDocument。该属性包含一个指针，指向表示框架内容的文档对象。在此之前没办法直接通过元素来取得这个文档对象。

12.2 样式

12.2.1访问元素的的样式

任何支持style特性的HTML元素在JS中都有一个对应的style属性

css属性	JS属性
background-image	style.backgroundImage
color	style.color
display	style.display
font-family	style.fontFamily

float时JS的保留字，不能作为属性名。所以它时其中一个不能直接转的css属性。

12.2.2操作样式表

1、css规则

CSSRule对象表示样式表中的每一条规则，它时一个供其他多种类型继承的基类型，其中最常见的就是CSSStyleRule类型，表示样式信息。CSSStyleRule对象包含下列属性：

cssText：返回整条规则对应的文本

parentRule:如果当前规则时导入规则，这个属性引用的就是导入规则，否则为null。IE不支持这个属性。

parentStyleSheet:当前规则所属的样式表，IE不支持这个属性。

selectorText：返回当前规则的选择符文本。

style：一个CSSStyleDeclaration对象，可以通过它设置和取得规则中特定的样式值。

type：表示规则类型的常量值，对也样式规则，这个值时1，IE不支持这个属性。

2、创建规则

向现有样式表中添加新规则，使用insertRule()方法。它接收两个参数：规则文本和表示在哪里插入规则的索引。

sheet.insertRule("body {background-color:red}", 0);  //DON方法

3、删除规则

deleteRule(),该方法接收一个参数：要删除的规则的位置。

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

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

12.2.3 元素大小

1、偏移量

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

offsetHeight：元素在垂直方向上占用的空间大小，以像素记。

offsetWidth：元素在水平方向上占用的空间大小，以像素记。

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

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

想知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环直到根元素，就可得到一个基本准确的值。

以下两个函数分别取得元素的做和上偏移量

function getElementLeft(element){

var actuaLeft = element.offsetLeft;

var current = element.offsetParent;

while(current != null){

actuaLeft +=current.offsetLeft;

current = current.offsetParent;

}

return actuaLeft;

}

function getElementTop(element){

var actuaTop = element.offsetTop;

var current = element.offsetParent;

while(current != null){

actuaTop +=current.offsetTop;

current = current.offsetParent;

}

return actuaTop;

}

2、客户区大小

指的是元素内容及其边距所占据的空间的大小。相关的属性有两个：clientWidth、clientHeight

3、滚动大小

指的是包含滚动内容的元素的大小。

与之相关的四个属性如下：

scrollWidth	没有滚动的情况下元素内容的总宽度
scrollHeight	没有滚动的情况下元素内容的总高度
scroll Left	被隐藏在元素左侧的像素数
scrollTop	被隐藏在元素上方的像素数

4、确定元素大小

方法：getBoundingClientRect()方法。该方法返回一个矩形对象，包含四个属性：

top , right, bottom, left，这些属性给出了元素在页面中相对于视口的位置

12.3 遍历

DOM遍历时深度优先的DOM结构遍历。

12.3.1 NodeIterator

该类型时两者中较为简单的一个，可以使用document.NodeIterator()方法创建它新实例，接收下列4个参数。

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

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

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

entityReferenceExpansion：布尔值，表示是否要扩展实体引用。该参数在HTML里面没有用，因为其中的实体引用不能扩展。

12.3.2 TreeWalker

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

parentNode()	遍历到当前节点的父节点
firstChild()	遍历到当前节点的第一个子节点
lastChild()	遍历到当前节点的最后一个节点
nextSibling()	遍历到当前节点的下个同辈节点
previous Sibling()	遍历到当前节点的上一个同辈节点

 

12.4 范围

12.4.1 DOM中的范围

DOM2级在document类型定义了createRange()方法，使用hasFeature()或者直接检测该方法，都可以确定浏览器是否支持范围。

1、用DOM范围实现简单选择

selectNode()  selectNodeContents() 两种方法

selectNode()：选择整个节点（包括其子节点）   selectNodeContents() 选择节点的子节点

2、用DOM范围实现复杂选择

setStart()和setEnd()方法。接收两个参数：一个参照点和一个偏移量

3、操作DOM范围的内容

4、插入DOM范围的内容

5、折叠DOM范围

6、比较DOM范围

7、复制DOM范围

8、清理DOM范围

12.4.2 IE8及更早版本中的范围

声明：该博客由http://www.cnblogs.com/lal-fighting/原创发表，未经作者允许，不得私自转载抄袭！！！