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遍歷。