只寫一些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遍歷。

轉載于:https://www.cnblogs.com/liuzhongyi1992/p/3495900.html

總結

以上是生活随笔為你收集整理的DOM2和DOM3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。