只写一些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; 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="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;
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 {
document.body.clientWidth,
document.body.clientHeight
};
}else{
return {
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遍历。