1. 樣式：

確定瀏覽器是否支持DOM2級(jí)定義的CSS能力：

var spportsDOM2CSS=document.implementation.hasFeature("CSS","2.0");//true
var spportsDOM2CSS2=document.implementation.hasFeature("CSS2","2.0");//true

1.2 訪問(wèn)樣式：

div.style.border="1px solid #ccc";

A. DOM樣式的屬性和方法：

cssText:訪問(wèn)style特性中的CSS代碼
length:CSS屬性數(shù)量
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. 計(jì)算的樣式

有些樣式覆蓋后，如果獲取當(dāng)前的樣式：

    var computedStyle=document.defaultView.getComputedStyle(myDiv,null);//第二個(gè)參數(shù)為偽元素字符串，如果沒(méi)有，設(shè)為Null
    var width=computedStyle.width;

2.2 元素大小

A. 偏移量

元素在屏幕上占用的可見(jiàn)空間
offsetHeight:元素在垂直方向上占用的空間。
offsetWidth：元素在水平方向上占用空間。
offsetLeft ：元素的左邊框距離包含元素的像素距離。
offsetTop：元素的上邊框距離包含元素的像素距離。

Paste_Image.png

B. 客戶區(qū)大小:

元素內(nèi)容及其內(nèi)邊距占用的空間。
clientWidth:內(nèi)容寬度加左右內(nèi)邊距
clientHeight:內(nèi)容高度加上下內(nèi)邊距

Paste_Image.png

C. 滾動(dòng)大?。?/h5>

scrollHeight:總體高度
scrollWidth:總體寬度
scrollLeft:左側(cè)隱藏寬度
scrollTop:上邊隱藏寬度

Paste_Image.png

2. 遍歷：

兩個(gè)輔助完成深度優(yōu)先遍歷DOM結(jié)構(gòu)的類型：NodeIterator和TreeWalker
下圖為以document為根節(jié)點(diǎn)進(jìn)行的遍歷

Paste_Image.png

2.1. NodeIterator：

創(chuàng)建NodeIterator對(duì)象需要使用creteNodeIterator方法，該方法的四個(gè)參數(shù)：

root:搜索的起點(diǎn)
whatToShow:訪問(wèn)哪些節(jié)點(diǎn)的數(shù)字代碼
filter:一個(gè)表示接收或者拒絕某種節(jié)點(diǎn)的函數(shù)
布爾值：是否擴(kuò)展實(shí)體引用。

whatToShow有下面的值：

NodeFilter.SHOW_ALL: 顯示所有類型節(jié)點(diǎn)
NodeFilter.SHOW_ELEMENT: 顯示元素節(jié)點(diǎn)
NodeFilter.SHOW_ATTRIBUTE:顯示特性節(jié)點(diǎn)
NodeFilter.SHOW_TEXT:顯示文本節(jié)點(diǎn)
。。。

filter參數(shù)：
acceptNode():返回應(yīng)該訪問(wèn)的節(jié)點(diǎn)，該方法返回NodeFilter.FILTER_ACCEPT，如果不應(yīng)該訪問(wèn)給定的節(jié)點(diǎn)，返回NodeFilter.FILTER_SKIP。
例如:返回只顯示<p>的節(jié)點(diǎn)迭代器。

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

訪問(wèn)所有類型的節(jié)點(diǎn)：

var iterator=document.createNodeIterator(document,NodeFilter.SHOW_ALL,null,false);

NodeIterator中的兩個(gè)主要方法：nextNode()和previousNode()
在NodeIterator對(duì)象中，有一個(gè)指針指向root節(jié)點(diǎn)，第一次調(diào)用nextNode()返回根節(jié)點(diǎn)，當(dāng)調(diào)用最后一個(gè)節(jié)點(diǎn)時(shí)，返回null。
當(dāng)調(diào)用最后一個(gè)節(jié)點(diǎn)時(shí)，previousNode()返回根節(jié)點(diǎn)，再次調(diào)用返回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的升級(jí)版，包括了除了nextNode()和previousNode()之外的更多功能。

parentNode():遍歷當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)
firstChild():遍歷當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
lastChild():遍歷當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
nextSibling():遍歷當(dāng)前節(jié)點(diǎn)的下一個(gè)同輩節(jié)點(diǎn)
previousSibling():遍歷當(dāng)前節(jié)點(diǎn)的上一個(gè)同輩節(jié)點(diǎn)

用TreeWalker遍歷元素可以不設(shè)置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();//跳轉(zhuǎn)到需要遍歷的節(jié)點(diǎn)
    while (node!=null){
        console.log(node.tagName);
        node=walker.nextSibling();
    }