DOM2和DOM3

只写一些DOM2和DOM3中我目前能用到的点，更多细节会以后补上

一.DOM变化

1.DOM2级为不同的DOM类型引入了一些与XML命名空间有关的方法（对HTML文档没有实际意义）。

2.定义了以编程方式创建Document实例的方法

3.支持创建DocumentType对象

二.样式

测试浏览器是否支持DOM2级定义的CSS能力

var supportsDOM2CSS2=document.implementation.hasFeature(“CSS2”,"2.0”);

1.访问元素的内联样式

HTML元素的style特性中的信息分别对应JS中style对象的属性。这个style对象只包含内联样式的信息。使用短划线（如background-image）的CSS属性名，要转换成驼峰大小写形式才能通过JS来访问（style.backgroundImage）。

有一个特殊的CSS属性：float属性，要转换成cssFloat

<div id="myDiv" style="background-color:blue; width:10px; height:20px"></div>
//取得样式
var myDiv=document.getElementById("myDiv"); //首先取得元素的引用
alert(myDiv.style.width); //"10px"//修改样式
myDiv.style.width="20px";

 

(1)style对象的属性和方法

style对象是CSSStyleDeclaration的实例,类似于一个数组

cssText

length

getPropertyValue()

item() []

removeProperty()

setProperty(propertyName,value,priority) //设置属性，并设置！important

//cssText在元素有多项变化时使用
myDiv.style.cssText="width:20px; height:30px; background-color:red";

 

//getPropertyValue()通过属性名取得属性值
var property,i,len,value
for(i=0,len=myDiv.style.length;i<len;i++){property=myDiv.style[i];value=myDiv.style.getPropertyValue(property);alert(property+":"+value);
}

 

//移除属性
myDiv.style.removeProperty("border");

 

(2).计算的样式(所有样式信息)

document.defaultView.getComputedStyle(元素，伪元素的字符串)

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

IE中类似的属性：style.currentStyle

注：所有计算的样式都是只读的，不能修改计算后样式对象中的CSS属性

2.操作样式表

CSSStyleSheet类型表示样式表，继承自StyleSheet，包括外部样式表和内部样式表。为只读

测试是否支持DOM2级样式表：

var supportDOM2StyleSheets=document.implementation.hasFeature(“StyleSheets”,"2.0”);

 

document.styleSheets表示文档中所有样式表。也可以直接通过<link><style>元素取得CSSStyleSheet对象，用sheet或styleSheet属性

//取得样式表对象
function getStyleSheet(element){return element.sheet||element.styleSheet;
}//取得第一个<link>元素引入的样式表
var link =document.getElementsByTagName("link")[0];
var sheet=getStylesheet(link);

 

(1)访问和修改CSS样式表

CSSRule对象表示样式表中的每一条规则，是一个基类型。CSSStyleRule类型继承自CSSRule，表示样式信息。常用属性：

cssText:与style.cssText属性类似，前者包含选择符文本和花括号，后者只包含样式信息。前者为只读，后者可重写

selectorText

style

影响符合该规则的所有元素：

div.box{background-color:blue;width:100px;height:200px;
}
//假设这条规则位于页面中第一个样式表中，且只有这一条样式规则var sheet=document.styleSheets[0]; //取得第一个样式表的引用
var rules=sheet.cssRules||sheet.rules; //取得表中的每一条规则
var rule=reles[0]; //取得第一条规则
alert(rule.style.width); //"100px"rule.style.backgroundColor="red" //修改样式信息

 

(2)向样式表中添加新规则

insertRule(规则文本，插入规则的索引) IE：addRule(“body”,"background-color:silver“,0)

夸浏览器向样式表插入规则：

function insertRule(sheet,selecorText,cssText,position){if(sheet.insertRule){sheet.insertRule(selectorText+"{"+cssText+"}",position);}else if(sheet.addRule){sheet.addRule(selectorText,cssText,position);}
}insertRule(document.styleSheet[0],"body","background-color:red",0);

 

(3)删除

deleteRule() removeRule()

夸浏览器：

function deleteRule(sheet,index){if(sheet.deleteRule){sheet.deleteRule(index);}else if(sheet.removeRule){sheet.removeRule(index);}
}deleteRule(document.styleSheets[0],0); //删除第一条规则

 

3.元素大小

(1)偏移量

偏移量：元素在屏幕上占用的所有可见的空间

offsetHeight

offsetWidth

offsetLeft

offsetTop

offsetParent

计算绝对位置：

//左偏移量
function getElementLeft(element){var actualLeft=element.offsetLeft;var current=element.offsetParent;while(current!==null){actualLeft+=current.offsetLeft;current=current.offsetParent;}return actualLeft;
}//上偏移量
function getElementTop(Top){var actualTop=element.offsetTop;var current=element.offsetParent;while(current!==null){actualTop+=current.offsetTop;current=current.offsetParent;}return actualTop;
}

 

一般来说，通过getElementLeft()和getElementTop()会返回与offsetLeft和offsetTop相同的值

(2)客户区大小

客户区大小：元素内容及其内边距所占据的空间大小

clientWidth

clientHeight

多用于确定浏览器视口大小：

function getViewport(){if(document.compatMode=="BackCompat"){return {width:document.body.clientWidth,width:document.body.clientHeight};}else{return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight};}
}

 

(3)滚动大小

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

scrollHeight：元素内容的总高度（实际大小）

scrollWidth：元素内容的总宽度

scrollLeft:被隐藏在内容区域左侧的像素数

scrollTop：被隐藏在内容区上边的像素数

夸浏览器取得滚动文档的总高度：

var docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
var docWidth=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

 

设置元素的滚动位置：

function scrollToTop(element){if(element.scrollTop!=0){element.scrollTop=0;}
}

 

(4)确定元素的大小

getBoundingClientRect()方法，有4个属性：left,top,right,bottom.给出了元素在页面中相对视口的位置

//兼容性问题再看

三.遍历

1.NodeIterator

document.createNodeIterator()

4个参数：

root：搜索起点

whatToShow:NodeFilter对象

filter:可以自定义NodeFilter对象

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

<div id="div1"><p><b>hello</b>world</p><ul><li>list1</li><li>list2</li><li>list3</li></ul>
</div>//遍历div元素中所有元素
var div=document.getElementById("div1");
var iterator=document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);
var node=iterator.nextNode();
while(node!=null){alert(node.tagName);node=iterator.nextNode();
}//只遍历li元素
var div=document.getElementById("div1");
var filter=function(node){return node.tagName.toLowerCase()=="li"?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
};
var iterator=document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,filter,false);
var node=iterator.nextNode();
while(node!=null){alert(node.tagName);node=iterator.nextNode();
}

 

(2)TreeWalker

比NodeIterator更高级。NodeIterator值允许以一个节点的步幅前后移动，而TreeWalker还支持DOM节后的各个方向上移动，包括父节点，同辈节点和子节点等方向。

//例如上边的只遍历li元素
var div=document.getElementById("div1");
var walker=document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,null,false);walker.firstChild(); //转到<p>
walker.nextSibling(); //转到<ul>var node=walker.firstChild(); //转到第一个<li>
while(node=!null){alert(node.tagName);node=walker.nextSibling();
}

 

四.范围

范围是选择DOM结构中特定的部分，然后执行相应操作的一种手段

使用范围选区可以在删除文档中某些部分的同时，保持文档结构的格式良好，过着复制文档中的相应部分。

1.DOM中的范围

2.IE8及更早版本中的范围

IE8及更早版本不支持“DOM2级遍历和范围”模块，但它提供了一个专有的文本范围对象，可以用来完成简单的基于文本的范围操作。IE9完全支持DOM遍历。