jQuery之DOM操作

標籤：多少   為什麼   w3c   arp   php   方向   技術   highlight   沒有   

　　對於DOM的認知，我們瞭解多少？

　　DOM是Document Object Model的縮寫，意思是文件物件模型，是由W3C制定的一套訪問和操作XML（eXtensible Markup Language）文檔的標準，即API。比如DOM告訴JavaScript引擎如何在瀏覽器視窗中顯示和操作XML建立的標記（Tag）。根據W3C DOM規範，DOM是一種與瀏覽器、平台、語言無關的介面，使用該介面可以輕鬆地訪問頁面中所有的標準組件。簡單來說，DOM解決了Netscape的JavaScript和Microsoft的JScript之間的衝突，給予了Web設計師和開發人員一套標準的方法，讓他們能夠輕鬆擷取和操作網頁中的資料、指令碼和表現層對象。

　　XML與HTML相似，但兩者是有區別。XML和HTML都來自於SGML，它們都含有標記，有著相似的文法，HTML和XML的最大區別在 於：HTML是一個定型的標記語言，用固定的標記來描述和顯示資料，比如<h1>表示首列名，有固定的尺寸；而XML沒有固定的標記，只能通過自訂的標記來描述資料的形式和結構，而不能顯示。HTML是將資料 和顯示混在一起，而XML則是將資料和顯示分開來。那為什麼能使用DOM訪問和操作HTML文檔（即網頁）呢？Web語義化的一個發展方向是將HTML逐 漸演變為更有語義、能將資料內容與現實分離的XML，但HTML不可能立即演變為XML，目前推薦使用的是一個過渡產物——XHTML。HTML與 XHTML網頁形成的節點樹（統稱為HTML節點樹）在結構上與XML節點樹一樣，可以看做是一個符合DOM的XML文檔，因此可以使用實現了DOM的程 序語言（如JavaScript、PHP等）來訪問和操作HTML文檔，即訪問和操作那些節點。

　　由於HTML與XML的相似性及差異，JavaScript不僅實現了標準的DOM方法和屬性（即由W3C制定的），而且還實現了HTML特有的DOM方法和屬性，前者稱為DOM Core，並不專屬於JavaScript，後者稱為HTML-DOM。不管是DOM Core還是HTML-DOM，我們在使用JavaScript的時候要注意瀏覽器之間的相容性，因為不同的瀏覽器對這兩類方法和屬性的支援可能不一樣。 這裡不詳談DOM Core和HTML-DOM，以及跨瀏覽器安全色性，教材上都有詳細描述。但一般推薦使用DOM Core方法和屬性，儘管稍顯繁雜。

　　一般來說，DOM操作分為3個方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。

DOM Core

　　DOM Core並不專屬於JavaScript，任何一種支援DOM的程式設計語言都可以使用它。它的用途並非僅限於處理網頁，也可以用來處理任何一種使用標記語言編寫出來的文檔，例如XML。

　　JavaScript中的getElmentByld()、getElementsByTagName()、getAttribute()和setAttribute()等方法，這些都是DOM Core的組成部分。

例如：

使用DOM Core來擷取表單對象的方法：

document.getElementsByTagName("form");

使用DOM Core來擷取某元素的src屬性的方法：

element.getAttribute("src");

　　在使用JavaScript和DOM為HTML檔案編寫指令碼時，有許多專屬於HTML-DOM的屬性。HTML-DOM的出現甚至比DOM Core還要早，它提供了一些更簡明的記號來描述各種HTML元素的屬性。

HTML-DOM

例如：

使用HTML-DOM來擷取表單對象的方法：

document.forms  //HTML-DOM提供了一個forms對象

使用HTML-DOM來擷取某元素的src屬性的方法：

element.src;

　　通過上面所說的方法，可以發現擷取某些對象、屬性既可以用DOM Core來實現，也可以使用HTML-DOM實現。相比較而言HTML-DOM的代碼通常比較簡短，不過它只能用來處理Web文檔。

CSS-DOM

　　CSS-DOM是針對CSS的操作。在JavaScript中，CSS-DOM技術的主要作用是擷取和設定style對象的各種屬性。通過改變style對象的各種屬性，可以使網頁呈現出各種不同的效果。

例如：設定某元素style對象字型顏色的方法：

element.style.color = "blue";

jQuery之DOM操作