揭露JavaScript DOM本質及操作技巧(1)

本文簡單介紹一下JavaScript DOM的本質及操作方法，雖然現在一些JavaScript架構，諸如jQuery、Prototype和MooTools能提高我們的前端開發效率，而且很好的解決了瀏覽器安全色性問題，但我們仍要打好javascript技術基礎。

JavaScript DOM的本質及操作方法

雖然現在一些JavaScript架構，諸如jQuery、Prototype和MooTools能提高我們的前端開發效率，而且很好的解決了瀏覽器安全色性問題，但我們仍要打好javascript技術基礎。文章將介紹JavaScript和文件物件模型(DOM)的本質。

引言JavaScript

JavsScript是可以在各種不同環境下使用的動態、鬆散類型(looselytyped)、基於原型的程式設計語言。除了作為流行的Web用戶端程式語言，它還可以使用於IDE外掛程式、PDF檔案或給予其它平台甚至更為抽象的概念。

JavaScript是由來自Netscape得BrendanEich創造的基於ECMAScript標準(ECMA-262)的語言。他最初被命名為LiveScript，但後來被改為JavaScript，這也是很多人會把它跟java混淆的原因之一。以下是它的一些特性的詳細說明：

◆動態程式語言在運行時執行;他們並沒有編譯。正因為此，有時JavaScript被認為是一種指令碼語言，而不是一個真正的程式設計語言(顯然是一種誤解)。

◆鬆散類型語言不要求強型別系統，如果你使用C或Java編程(與JavaScript不同)聲明變數時你就明白必須聲明類似’int’(整型)。JavaScript的不同之處在於你用不著指定它的類型。

◆在JavaScript中我們使用原型來實作類別似繼承的效果，JavaScript不支援類。

◆JavaScript也是函數式語言，它處理函數為優先對象。它是基於lambda下的理念。

理解以上概念對於學習JavaScript這門技術關係並不是很大。只是讓大家對JavaScript有個初步正確的的認識，並瞭解JavaScript與其它程式設計語言的本質區別。

文件物件模型

文件物件模型(DocumentObjectModel)，通常簡稱為DOM，是網站內容與JavaScript互連的介面。自JavaScript成為最常用的語言時JavaScript和DOM通常被視為獨立的實體。DOM介面用於存取、遍曆和控制HTML和XML文檔。

下面是關於DOM的一些重要的知識:

◆Window對象作為全域對象，你僅需嘗試使用”window”來訪問它。Window對象下包含了你的所有要執行的JavaScript代碼。就像所有對象都包含屬性和方法。

◆屬性是儲存於對象下的變數。所有在網頁中建立的變數都會成為window對象的屬性。

◆方法是儲存在對象下的函數。在所有函數儲存在window對象下時，你可以使用’methods’引用它們。

◆DOM相對於Web文檔結構建立階層，層次有節點群組成。DOM節點有很多不同的類型，其中最重要的要數’Element’、’Text’和’Document’了。

◆‘Element’節點表示在頁面中的元素，所以如果在頁面中你有一個段落元素(‘

’)，那麼你可以通過DOM的節點來訪問它。

◆‘Text’節點表示在頁面中的所有文本(在元素中)，所以如果在頁面的段落中有一些常值內容，那麼你可以通過DOM的節點來訪問它。

◆‘Document’節點表示整個文檔。(它是DOM樹的根節點)

◆另請注意，元素屬性是DOM節點本身。

◆不同的布局引擎對於DOM標準的執行是有一定的差別的。例如，使用Gecko布局引擎的FireFox瀏覽器可以很好的執行(但也並不是完完全全按照W3C規範那樣)，但使用Trident引擎的IE因它的很多Bug和不完全執行DOM標準而為眾人所知。這便是前端開發領域的一大痛苦之處。