JavaScript DOM的本質與操作方法-js教程-PHP中文網

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

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

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

◆動態程式語言在執行時執行；他們並沒有編譯。正因為此，有時JavaScript被認為是一種腳本語言，而不是一個真正的程式語言（顯然是一種誤解）。

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

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

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

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

文檔物件模型

文檔物件模型(Document Object Model)，通常簡稱為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標準而為眾人所知。這便是前端開發領域的一大痛苦之處。

網頁中的JavaScriptScript元素

當你想在網站上使用JavaScript的時候，需要讓它們包含在script元素中:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.php.cn">  
   <html xmlns="http://www.php.cn">   
   <head>   
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
      <title>JavaScript!</title>   
  </head>   
  <body>   
    
    <script type="text/javascript">   
    // <![CDATA[ 
          
    // ]]>   
    </script>   
          
  </body>   
</html>

登入後複製

正如你所見在文檔下面有script元素。其實type屬性嚴格來講應設定為”application/javascript”,但它不出所料的在IE瀏覽器下無法正常工作，所以我們使用”text/javascript”或不用type屬性，如果你在意代碼W3C規範驗證的話建議你使用前者(“text/javascript”)。

你也會注意到在script元素中我們還有一對被註解掉的程式碼行，它們告訴支援XHTML的瀏覽器script元素中的內容是字元資料而不應被解釋為XHTML標記。如果你打算在JavaScript程式碼中使用’’字元的話那它就是相當必要的。當然，如果你是用普通HTML程式碼的話，那你完全可以無視它。

defer屬性

我們script元素中的JavaScript程式碼會在頁面讀取過程中執行，唯一的例外就是當script元素有defer屬性的時候。預設情況下，當瀏覽器遇到script元素時，它會停下來並執行程式碼，然後再繼續進行文件解析。 defer屬性告訴瀏覽器程式碼包含非變更文件程式碼而且可以稍後執行。它的唯一問題就是只在IE下可用，所以我們還是要盡量不要使用它了，了解就行。

連結外部腳本

如果你想連接一個外部腳本文件，那麼你只需為你的script元素添加一個有文件地址的src屬性。把腳本文件獨立分離出來進行呼叫的確相對於內聯腳本來說是個好辦法，它意味著瀏覽器可以緩存該文件，而且你都不用擔心那些CDATA之類的廢話。

JavaScript要點

在我們繼續講DOM之前有必要學習一下JavaScript基礎要點，如果有些東西你理解起來有些困難，別擔心，你早晚會搞定它的。在JavaScript種不同類型的值，它們是數值、字串、布林值、物件、Undefined 和 Null。單行註解使用兩個斜線(//)，這行內的所有內容都將被當作註解內容來理解。多行註解使用’/*’ 和 ‘*/’完成註解段落。

數值

在JavaScript中所有數值都被描繪成浮點數值，當定義數值變數時記得不要用引號。

// 附註: 要一直使用'var' 來宣告變數: var leftSide = 100;
var topSide = 50;
var areaOfRectangle = leftSide = 50;
var areaOfRectangle = leftSide = 50;

var areaOfRectangle = leftSide = 50;

var areaOfRectangle = leftSide = topSideide =是有字面上來看，JavaScript不會對它進行處理。一個字串可由一連串的Unicode字元組成，並由一對雙引號或單引號包圍。

var firstPart = 'Hello'; var secondPart = 'World!';
var allOfIt = firstPart + ' ' + secondPart; // Hello World!
// +Part + ' + secondPart; // Hello World!
// + +號進行字串連接於數學上的加法運算)
布林值

布林類型在你進行條件判斷的時候很有用，以了解是否符合指定的標準。布林有兩個可能的值:true和false。任何使用邏輯演算法的比較結果都將是布林值。

5 === (3 + 2); // = true // 你可以給變數宣告布林值:
var veryTired = true;
//// 你的程式碼
}
上面看到的'==='是比較運算符，我們將在後面討論。

函數

函數是一個專門的物件。

// 使用函數運算建立新函數: function myFunctionName(arg1, arg2) {

// 這裡是函數的程式碼

}
     // 這裡是函數的程式碼
}
     // 這裡是函數的程式碼
}
     // 這裡是函數的程式碼
}
   :
function(arg1, arg2) {
    // 這裡是函數的程式碼
}

// 執行時僅需對他進行參考並使用圓號(Functions); myFunctionName('foo', 'bar'); // 帶參數

// 你也可以在不宣告變數的情況下執行函數

(function(){

(function(){

(function(){

})();

數組

數組也是一個專門的對象，它可以包含任意數量的資料。要存取數組中的資料你就必須使用數字，用以引用其在數組中的”索引」。

  // 兩種聲名數組的不同方式, // 字面:
var fruit = ['apple', 'lemon', 'banana'];

/// 使用數組構造器： 'apple', 'lemon', 'banana');

fruit[0]; // 存取陣列中的第一個資料項目(apple)

fruit[1]; // 存取陣列中的第二個資料項目項目 (lemon)

fruit[2]; // 存取陣列中的第三個資料項目 (banana)

物件

物件是命名的的值的集合(鍵-值對)，它和陣列很相似，唯一的不同之處在於你可以為每個資料值指定名字。

  // 兩種陳述對象的不同方式,
// 字面(大括號):
var profile = {

};

// 適用物件建構器:
var profile = new Object();
profile.name = 'Li';
profile.age = 23;
profile.job = 'Web Developer';

if/elsese 語句

/else語句是JavaScript中最常見的結構，它看起來就像下面這樣:

var legalDrinkingAge = 21; var yourAge = 23;