浅谈JavaScript中DOM2

浅谈JavaScript中DOM2

DOM2级分成了以下六个模块：

1、DOM2级核心：为节点添加了方法和属性

2、DOM2级视图

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

4、DOM2级样式：CSS

5、DOM2级遍历和范围

6、DOM2级HTML

一、样式

    在THML中，为网页设置样式有三种方法，而DOM2则围绕这三种方法提供了一套API，可以使用下列代码来试探浏览器是否支持

var supportsDOM2CSS = document.implementation.hasFeature("CSS","2.0");  //是否支持CSS

1、访问元素的样式

1、访问元素的style特性，即标签内的style

    在HTML中有style特性的元素（在标签中直接定义style的），在JS中也都有一个对应的style属性，而这个style对象的属性则一一对应HTML中style的特性（如background-color），但命名有所不同。比如：

    CSS属性                 JS属性
     color              style.color         //一般情况下
background-color     style.backgroundColor  //所有的-都要换成驼峰大小写
     float              style.cssFloat      //只有float特殊，IE中是：styleFloat

    DOM2级样式还为style对象定义了以下属性和方法

cssText——访问HTML中style的代码，重写整个style特性

myDiv.style.cssText = "width:25px";

length——CSS属性数量,与item( )一起使用

parentRule——

getPropertyCSSValue(propertyName)——返回CSSValue对象，有cssText属性和cssValueType属性（0：继承，1：基本值，2：值列表，3：自定义）

getPropertyPriority(propertyName)——若属性使用了!important,则返回"important"

getPropertyValue(propertyName)——返回属性值的字符串形式

item(index)——返回属性名，也可用[ ]

removeProperty(propertyName)——删除属性

setProperty(propertyName,value.priority)——设置属性

2、元素的全部样式

    当前元素的所有样式，包括标签内的style特性和嵌入式<style>，以及引用外部文件的CSS样式:

1)document.defaultView.getComputedStyle( )方法，有两个参数：①元素名 ②伪元素字符串（例如":after"，无则null）

2)IE支持的：元素的currentStyle属性，包含元素的全部样式。

myDiv.currentStyle.width   //IE中，currentStyle拥有元素的全部样式
document.defaultView.getComputedStyle(myDiv,null).width;    //除了IE，其他浏览器都能用

2、操作样式表

使用以下代码来测试浏览器是否支持DOM2级样式表

var supportsDOM2StyleSheets=document.implementation.hasFeature("StyleSheets","2.0")

   通过document.styleSheets集合表示文档的所有样式表，所以其length属性能得知样式表数量，而item()方法可访问每一个样式表。元素的样式可用sheet访问(IE是styleSheet)，如element.sheet（或者element.styleSheet）

1）CSSRule对象，表示样式中的每一条规则，其有以下属性

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

style——通过它设置和取得规则中特定的样式值

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

var sheet = document.styleSheets[0];  //取得样式
var rules = sheet.cssRules || sheet.rules ;  //取得规则列表
var rule = rules[0];  //取得第一条规则
alert(rule.selectorText)    //返回此条规则的选择器
alert(rule.style.cssText);  //返回此条规则的CSS文本
rule.style.bacegroundColor = "red";   //修改规则

2）创建规则

    向现有的样式表中添加新规则：insertRule( )方法（IE8以前是addRule方法），有两个参数：①规则文本  ②插入位置

sheet.insertRule("body{background-color:silver}",0);  //样式表第一条插入规则

3）删除规则

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

3、元素大小

1）偏移量：元素在页面所有可见空间

2）客户区大小：元素内容及其内边距所占的大小

例如：确定浏览器的视口大小：document.body.clientWidth (混杂模式) 或者：document.documentElement.clentWidth（标准模式）

3、滚动大小：包含滚动内容的元素大小

scrollHeight——无滚动条时元素内容总高度  ,相应的scrollWidth

scrollLeft——隐藏在内容区左侧的像素     scrollTop——隐藏在内容区上侧的像素（通过这两个属性可设置显示内容位置）

4、确定元素大小

getBoundingClientRect( )——返回一个矩形对象（left、top、right、bottom），反应元素相对视口的位置

二、遍历

    遍历以给定节点（任一节点）为根， 不可能向上超出DOM树的根节点，但移动的方向至少有两个。

1、NodeIterator类型

1、使用document.createNodeIterator( )创建，此方法有4个参数：

①root： 起点节点    ②whatToShow：要访问哪些节点的数字代码      ③filter：过滤器  ④一个布尔值：是否扩展实体引用

其中，whatToShow可以是一或多个过滤器来确定访问哪些元素，而过滤器filter可以是以下值：NodeFilter.SHOW_类型

类型可以是：①ALL——所有类型  ②ELEMENT——元素类型  ③TEXT——文本类型   ④COMMENT——注释节点

⑤DOCUMENT_TYPE——文档类型节点     

var whatToShow = NodeFilter.SHOW_ELEMENT |NodeFilter_TEXT;  //查看元素或文本

NodeFilter对象只有一个方法：acceptNode( )

2、NodeIterator类型主要有两个方法：

nextNode( )——向前前进一步，往最后一个节点方向

previousNode( )——向后后退一步，往根节点方向

var iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);//选择元素类型，不过滤
var node = iterator.nextNode();    //第一次调用，指向根节点
while (node!==null){
    alert(node.tagName);    //输出标签名
    node = iterator.nextNode( );     //指向下一个元素
}

2、TreeWalker

    1、除了nextNode( )和perviousNode( )方法外，还有以下方法：

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

firstChild( )——第一个子节点

lastChild( )——最后一个子节点

nextSibling( )——下一个同辈节点

previousSibling( )——上一个同辈节点

   2、通过document.createTreeWalker( )方法创建，4个参数，同NodeIterator( )方法的参数

   3、TreeWalker能够在DOM结构中沿任何方向移动

    4、currentNode属性表示上一次遍历返回的节点，可用来设置新起点，如

walker.currentNode = document.body;  //修改起点为body

三、范围range

    通过范围可以选择文档的一个区域

1、DOM中的范围

document.createRange( )方法来创建范围，其实例有如下属性和方法

startContainer——包含范围起点的节点 

startOffset——范围在startContainer中起 点的偏移量

endContainer——包含范围终点的节点 

endOffset——范围在endContainer中终点的偏移量

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

selectNode()——选择节点（包括其子节点）

selectNodeContents()——选择子节点

var range = document.createRange();
rang.selectNode(p)  //选择p元素及其子节点

setStartBefore(a)——将范围起点设置在a之前 

setStratAfter(a)——将范围起点设置在a之后

setEndBefore(a)——将范围终点设置在a之前

setEndAfter(a)——将范围终点设置在a之后

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

setStart( )和setEnd( )方法，有两个参数：①参照节点 ②偏移量

3、操作DOM范围中的内容

deleteContents()——删除范围所包含的内容

extractContents() ——简介范围所包含的内容