1. 样式：
确定浏览器是否支持DOM2级定义的CSS能力：
var spportsDOM2CSS=document.implementation.hasFeature("CSS","2.0");//true
var spportsDOM2CSS2=document.implementation.hasFeature("CSS2","2.0");//true
1.2 访问样式：
div.style.border="1px solid #ccc";
A. DOM样式的属性和方法：
cssText:访问style特性中的CSS代码
length:CSS属性数量
getPropertyValue(propertyName):给定属性的字符串值。
遍历样式：
var div=document.getElementById("myDiv");
div.style.border="1px solid #ccc";
var length=div.style.length;
var prop,value;
for(var i=0;i<length;i++){
prop=myDiv.style[i];
value=myDiv.style.getPropertyValue(prop);
console.log(prop+":"+value);
}
B. 计算的样式
有些样式覆盖后，如果获取当前的样式：
var computedStyle=document.defaultView.getComputedStyle(myDiv,null);//第二个参数为伪元素字符串，如果没有，设为Null
var width=computedStyle.width;
2.2 元素大小
A. 偏移量
元素在屏幕上占用的可见空间
offsetHeight:元素在垂直方向上占用的空间。
offsetWidth：元素在水平方向上占用空间。
offsetLeft ：元素的左边框距离包含元素的像素距离。
offsetTop：元素的上边框距离包含元素的像素距离。
Paste_Image.png
B. 客户区大小:
元素内容及其内边距占用的空间。
clientWidth:内容宽度加左右内边距
clientHeight:内容高度加上下内边距
Paste_Image.png
C. 滚动大小：
scrollHeight:总体高度
scrollWidth:总体宽度
scrollLeft:左侧隐藏宽度
scrollTop:上边隐藏宽度
Paste_Image.png
2. 遍历：
两个辅助完成深度优先遍历DOM结构的类型：NodeIterator和TreeWalker
下图为以document为根节点进行的遍历
Paste_Image.png
2.1. NodeIterator：
创建NodeIterator对象需要使用creteNodeIterator方法，该方法的四个参数：
root:搜索的起点
whatToShow:访问哪些节点的数字代码
filter:一个表示接收或者拒绝某种节点的函数
布尔值：是否扩展实体引用。
whatToShow有下面的值：
NodeFilter.SHOW_ALL: 显示所有类型节点
NodeFilter.SHOW_ELEMENT: 显示元素节点
NodeFilter.SHOW_ATTRIBUTE:显示特性节点
NodeFilter.SHOW_TEXT:显示文本节点
。。。
filter参数：
acceptNode():返回应该访问的节点，该方法返回NodeFilter.FILTER_ACCEPT，如果不应该访问给定的节点，返回NodeFilter.FILTER_SKIP。
例如:返回只显示<p>的节点迭代器。
var filter={
acceptNode:function (node) {
return node.tagName.toLowerCase()=="p"? NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
}
};
var iterator=document.createNodeIterator(document,NodeFilter.SHOW_ELEMENT,filter,false);
Paste_Image.png
访问所有类型的节点：
var iterator=document.createNodeIterator(document,NodeFilter.SHOW_ALL,null,false);
NodeIterator中的两个主要方法：nextNode()和previousNode()
在NodeIterator对象中，有一个指针指向root节点，第一次调用nextNode()返回根节点，当调用最后一个节点时，返回null。
当调用最后一个节点时，previousNode()返回根节点，再次调用返回null。
遍历document元素中的所有元素：
var iterator=document.createNodeIterator(document,NodeFilter.SHOW_ELEMENT,null,false);
var node=iterator.nextNode();
while (node!=null){
console.log(node.tagName);
node=iterator.nextNode();
}
2.2 TreeWalker：
TreeWalker是NodeIterator的升级版，包括了除了nextNode()和previousNode()之外的更多功能。
parentNode():遍历当前节点的父节点
firstChild():遍历当前节点的第一个子节点
lastChild():遍历当前节点的最后一个子节点
nextSibling():遍历当前节点的下一个同辈节点
previousSibling():遍历当前节点的上一个同辈节点
用TreeWalker遍历元素可以不设置filter，如下例：遍历p元素
<div id="myDiv">
<p>哈哈</p>
<p>xixi</p>
</div>
var div=document.getElementById("myDiv");
var walker=document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,null,false);
var node=walker.firstChild();//跳转到需要遍历的节点
while (node!=null){
console.log(node.tagName);
node=walker.nextSibling();
}
