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/p/5158870.html
