JavaScript DOM，javascriptdom

JavaScript DOM，javascriptdom
JavaScript DOM

 

一：簡介

 

        前面已經提到過JavaScript與DOM之間的關係：

        DOM(document object model) 是一套對文檔內容進行抽象和概念化的方法、是對外提供的操縱瀏覽器內容的API。

        JavaScript對網頁進行的所有操作都是通過DOM進行的、用於改變瀏覽器呈現的內容與方式。DOM屬於瀏覽器，而不是JavaScript語言規範裡的規定的核心內容。

        此篇重點在於DOM。

 

二：DOM

 

        D——Document：當建立一個網頁並把他載入到web瀏覽器中時、DOM自動產生。把編寫的網頁文檔轉換為一個文檔對象。

        O——Object：對象。比如上面提到的把網頁文檔轉換成的document對象。JavaScript中對象分為三類（前文有詳細說明）：使用者定義對象（user-defined object）、內建對象（nativeobject）、宿主對象（host object）。

        M——Model or Map：某種事物的表現形式。

 

三：節點

 

        元素節點（elementnode）：是DOM的原子、對應文檔中元素、如div、p、li等、可以包含其他元素節點。

        文本節點（textnode）：總是被包含於元素節點。

        屬性節點（attributenode）：用來對元素做出更具體的描述。

 

四：CSS

 

        Cascading StyleSheet：改變文檔呈現形式、具有繼承（inheritance）特性、即加於某元素的樣式同樣作用與此元素包含的所有元素、但是可以被覆蓋。

 

五：DOM常用方法

 

        1.  擷取元素--用於document對象！

/** * Get element */// reture one elementvar element = document.getElementById('id');//reture an array.var elements = document.getElementsByTagName('tag');//reture an array.var elements = document.getElementsByClassName('class');

        假如getElementsByClassName不起作用、可通過如下方式實現：

 

function getElementsByClassName (node, className) {if (ndoe.getElementsByClassName) {return node.getElementsByClassName(className);} else {var result = new Array();var elems = node.getElementsByTagName('*');for (var i = elems.length - 1; i >= 0; i--) {if (elems[i].className.indexOf(className) != -1){result[i] = elems[i];}}return result;}}

        2.  操作元素屬性

 

/** * Attribute operation */document.getAttribute('attr');document.setAttribute('attr', value);

六：補充

     

        這裡提到的只是很少一部分DOM方法、不是DOM的API、其他還有很多方法沒有列舉。