一、样式
1.访问元素的样式
style对象包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。对于使用短划线分隔的CSS属性，必须将其转换成驼峰大小写形式，才能通过JS来访问。
特例：float属性，因为float是JS的关键字，因此不能用作属性名。所以他的属性名为cssFloat；在IE中使用styleFloat;
1）DOM样式属性和方法
cssText:访问style特性中的CSS代码；读：返回浏览器对style特性中CSS代码的内部表示。写：赋给cssText的值会重写整个style特性的值。
length:应用给元素的CSS属性的数量。与item方法配套使用，以便迭代在元素中定义的CSS属性。
parentRule:CSS信息的CSSRule对象。
getPropertyCSSValue(prepertyName):返回包含给定属性值的CSSValue对象。
getPropertyPriority(propertyName):如果给定的属性使用了!important设置，则返回important;否则，返回空字符串。
getPropertyValue(propertyName):返回给定属性的字符串值
item(index):返回给定位置的CSS属性的名称
removeProperty(propertyName):从样式中删除给定属性。
setProperty(propertyName,value,priority):将给定属性设置为相应的值，并加上优先权标志（important或者空字符串）。
2）计算的样式
document.defaultView.getComputedStyle()方法，接受两个参数：要取得计算样式的元素和一个伪元素字符串（:after）。如果不需要伪元素信息，第二个参数可以是null。
var div=document.getElementById('myDiv');
var computedStyle=document.defaultView.getComputedStyle(div,null);
IE不支持getComputedStyle()方法，支持currentStyle属性。
var computedStyle=div.currentStyle;
所有计算的样式都是只读的；不能修改计算后样式对象的CSS属性。计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值得CSS属性都会表现在计算后的样式中。
2.操作样式表
3.元素大小
1）偏移量
包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（不包括外边距）。
offsetHeight：元素在垂直方向上占用的大小，以像素计。包括元素的高度，（可见的）水平滚动条的高度、上边框的高度和下边框的高度。
offsetWidth:元素在水平方向上占用的空间大小，包括元素的宽度，（可见的）垂直滚动条宽度，左边框宽度和右边框宽度。
offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。
其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等。例如<td>的offsetParent是作为祖先元素的<table>元素，因为<table>是在DOM层次中距<td>最近的一个具有大小的元素。
2)客户区大小
指的是元素内容及其内边距所占空间大小。
clientWidth元素内容区宽度加上左右内边距宽度 clientHeight元素内容区高度加上上下内边距高度。滚动条占用的空间不计算在内。
确定浏览器的视口大小，可以使用document.documentElement或document.body的clientWidth和clientHeight
function getViewPort(){
if(document.compatMode=='BackCompat'){
return{
document.body.clientWidth,
height:document.body.clientHeight
};
}else{
return{
document.documentElement.clientWidth,
height:document.documentElment.clientHeight
};
}
}
3)滚动大小
包含滚动内容的元素的大小。
scrollHeight:在没有滚动条的情况下，元素内容的总高度。
scrollWidth:在没有滚动条的情况下，元素内容的总宽度。
scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollTop:被隐藏在内容区域上方的像素数。同过设置这个属性可以改变元素的滚动位置。
在确定文档的总高度时（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才能保证跨浏览器的环境下得到精确的结果。
var docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
var docWidth=Math.max(document.documentElement.scrollWidth,document.documentElment.clientWidth); //混杂模式下的IE用document.body
4)确定元素的大小getBoundingClientRect()方法，返回一个矩形对象，包含4个属性：left,top,right,bottom。给出了元素在页面中相对于视口的位置。IE8及更早版本认为文档的左上角坐标是（2,2），而其他浏览器包括IE9则将传统的（0,0）作为起点坐标。
二、遍历
DOM2定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker。这个类型能够基于给定的起点对DOM结构执行深度优先的遍历操作。IE不支持DOM遍历，所以使用遍历的跨浏览器解决方案非常少见。
1）NodeIterator类型
使用document.createNodeIterator(root,whatToShow,filter,entityReferenceExpansion)创建实例
root:搜索起点 whatToShow:要访问哪些节点的数字代码 fileter：对象，或者一个表示应该接受还是拒绝某种特定节点的函数。 最后一个：布尔值，表示是否要扩展实体引用。在HTML中没有用。
var whatToShow=NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_TEXT
每个NodeFilter对象只有一个方法，及acceptNode();如果应该访问给定的节点，该方法返回NodeFilter.FILTER_ACCEPT，如果不应该访问给定的节点，该方法返回NodeFilter.FILTER_SKIP。由于NodeFilter是一个抽象的类型，因此不能直接创建它的实例。在必要时，只要创建一个包含acceptNode()方法的对象，然后将这个对象传入createNodeIterator()中即可。
var filter={
acceptNode:function(node){
return node.tagName.toLowerCase()=='p'?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
}
};
var iterator=document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);
第三个参数也可以是一个与acceptNode()方法类型的函数。
var filter=function(node){
return node.tagName.toLowerCase()=='p'?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
}
如果不指定过滤器，那么应该在第三个参数的位置上传入null。
NodeIterator类型的两个主要方法是nextNode()和previousNode()。
2）TreeWalker
方法：parentNode() firstChild() lastChild() nextSibling() previousSibling() nextNode() previousNode()
创建对象使用document.createTreeWalker(),参数同NodeIterator
不同点：filter可以返回的值有所不同。NodeFilter.FILTER_ACCEPT,NodeFilter.FILTER_SKIP,NodeFilter.FILTER_REJECT;
NodeIterator对象中：NodeFilter.FILTER_SKIP跳过指定的节点
TreeWalker对象中：NodeFilter.FILTER_SKIP跳过相应节点继续前进到子树中的下一个节点，而NodeFilter.FILTER_REJECT则会跳过相应节点及该节点的整个子树。
TreeWalker真正强大的地方在于能够在DOM结构中沿任何方向移动。还有一个属性叫currentNode,表示任何遍历方法在上一次遍历中返回的节点。通过设置这个属性也可以修改遍历继续进行的起点。