深入理解JavaScript系列（23）：JavaScript與DOM（上）——也適用於新手，javascriptdom
文件物件模型Document Object Model
DOM（Document Object Model，文件物件模型）是一個通過和JavaScript進行內容互動的API。Javascript和DOM一般經常作為一個整體，因為Javascript通常都是用來進行DOM操作和互動的。
主要內容來自：http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/
關於DOM，有些知識需要注意：
1. window對象作為全域對象，也就是說你可以通過window來訪問全域對象。
2. DOM為web文檔建立帶有層級的結果，這些層級是通過node節點群組成，這裡有幾種DOM node類型，最重要的是Element, Text, Document。
3. 每個引擎對DOM標準的實現有一些輕微的不同。例如，Firefox瀏覽器使用的Gecko引擎有著很好的實現（儘管沒有完全遵守W3C規範），但IE瀏覽器使用的Trident引擎的實現卻不完整而且還有bug，給開發人言帶來了很多問題。
如果你正在使用Firefox，我推薦你立即下載Firebug外掛程式，對於你瞭解DOM結構非常有用。
Web上的JavaScript Script元素當你在網站頁面上使用JavaScript的時候，需要使用SCRIPT元素：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <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。另外你也可以看到在SCRIPT元素裡的注釋行// <![CDATA[ 是用來告訴支援XHTML的瀏覽器，這裡面的代碼是字元資料而不是XHTML標籤，比如如果你在裡面的資料使用了<或>，瀏覽器就不會再解析成XHTML標籤了。
Defer屬性任何在SCRIPT元素裡聲明的代碼在頁面載入的時候都會運行，唯一一個例外是給SCRIPT元素加上一個defer屬性。defer屬性告訴瀏覽器載入完HTML文檔以後再執行JS代碼，但這個屬性只能在IE下使用。
串連外部指令碼如果你想瞭解外部指令碼，只需要簡單地在SCRIPT上使用SRC屬性就行了，使用單獨的JS檔案的好處是可以緩衝，而且也不需要擔心CDATA方面的問題：
<script type="text/javascript" src="my-script.js"></script>JavaScript必備
在我們繼續DOM之前，我們來複習一下JavaScript的核心必備知識，如果你還不瞭解，也沒關係，我們在這一章節將稍微花點時間來回顧一下。
JavaScript有幾種資料類型：Number, String, Boolean, Object, Undefined and Null。
單行注釋使用雙斜杠//，雙斜杠後面的所有文字都會被注釋掉，多行注意使用/*和*/括住。
Number在JavaScript裡所有的Number都是浮點型的，當聲明一個數字變數的時候，記得不要使用任何引號。
// 註：使用var類聲明變數var leftSide = 100; var topSide = 50; var areaOfRectangle = leftSide * topSide; // = 5000String
JavaScript裡聲明字串特別簡單，和其它語言一樣，在JS裡使用單引號或雙引號都可以。
var firstPart = 'Hello'; var secondPart = 'World!'; var allOfIt = firstPart + ' ' + secondPart; // Hello World! // +符合是字元串連符。也用於數字相加Boolean
布爾類型用於條件判斷，布爾類型是只有2個值：true和false。任何使用邏輯操作符的比較都會返回布爾值。
5 === (3 + 2); // = true // 你也可以將布爾值賦給一個變數var veryTired = true;// 這樣使用if (veryTired) { // 執行代碼 }
===也是比較操作符，不僅比較數值，還比較類型。
Function函數是特殊的對象。
// 使用function操作符來聲明新函數 function myFunctionName(arg1, arg2) { // 函數代碼}// 你也可以聲明匿名函數 function (arg1, arg2) { // Function code goes here. }// 運行函數很簡單，直接在函數名稱後面加上小括弧就可以了// 或者也可以帶上參數myFunctionName(); // 無參myFunctionName('foo', 'bar'); // 有參數// 也可以使用自調用 (function () { // 這裡自調用函數})();
Array
數組也是特殊的對象，它包含了一批值（或對象），訪問這些資料的話需要使用數字索引：
// 2種方式聲明數組// 字面量: var fruit = ['apple', 'lemon', 'banana'];// Array建構函式: var fruit = new Array('apple', 'lemon', 'banana');fruit[0]; // 訪問第1個項(apple) fruit[1]; // 訪問第2個項(lemon) fruit[2]; // 訪問第3個項(banana)
Object
一個對象是一個key-value的集合，和數組相似，唯一的不同是你可以為每個資料定義一個名稱。
// 2種類型定義Object對象// 字面量（大括弧）var profile = { name: 'Bob', age: 99, job: 'Freelance Hitman'};// 使用Object建構函式var profile = new Object();profile.name = 'Bob';profile.age = 99;profile.job = 'Freelance Hitman';
IF/Else語句
JS裡使用最多的語句莫過於條件陳述式了：
var legalDrinkingAge = 21; var yourAge = 29; if ( yourAge >= legalDrinkingAge ) { alert('You can drink.'); } else { alert('Sorry, you cannot drink.');
JavaScript操作符
建議你訪問這個頁面來查看所有的JS操作符，這裡我僅僅給出一些例子：
// 加減乘除var someMaths = 2 + 3 + 4 - 10 * 100 / 2; // 等於 if ( 2 == (5 - 3 ) { /* 代碼 */ } // == 比較是否相等 // 不等於 if ( 2 != (5 - 3 ) { /* 代碼 */ } // 嚴格等於（推薦） 2 === 2 // 代替 2 == 2 2 !== 3 // 代替 2 != 3 // 賦值: var numberOfFruit = 9; numberOfFruit -= 2; // 等價於 "numberOfFruit = numberOfFruit - 2" numberOfFruit += 2; // 等價於 "numberOfFruit = numberOfFruit + 2"
Loop迴圈
Loop迴圈在是遍曆數組或者對象的所有成員的時候非常方便，JavaScript裡使用最多的是FOR和WHILE語句。
var envatoTutSites = ['NETTUTS', 'PSDTUTS', 'AUDIOTUTS', 'AETUTS', 'VECTORTUTS'];// WHILE迴圈var counter = 0;var lengthOfArray = envatoTutSites.length;while (counter < lengthOfArray) { alert(envatoTutSites[counter]); counter++; // 等價於counter += 1; }// FOR迴圈// i只是用於迭代，可以任意取名 for (var i = 0, length = envatoTutSites.length; i < length; i++) { alert(envatoTutSites[i]);} DOM本文
訪問DOM節點
我們來個例子，一個HTML裡包含一段文本和一個無序的列表。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JavaScript!</title> </head> <body> <p id="intro">My first paragraph...</p> <ul> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li> <li>List item 1</li> </ul> <script type="text/javascript"> // <![CDATA[ // ]]> </script> </body> </html>
上面例子裡，我們使用getElementById DOM方法來訪問p段落，在SCRIPT裡添加如下代碼：
var introParagraph = document.getElementById('intro'); // 現在有了該DOM節點，這個DOM節點展示的是該資訊段落
變數introParagraph現在已經引用到該DOM節點上了，我們可以對該節點做很多事情，比如查詢內容和屬性，或者其它任何操作，甚至可以刪除它，複製它，或者將它移到到DOM樹的其它節點上。
文檔上的任何內容，我們都可以使用JavaScript和DOM API來訪問，所以類似地，我們也可以訪問上面的無序列表，唯一的問題是該元素沒有ID屬性，如果ID的話就可以使用相同的方式，或者使用如下getElementsByTagName方式：
var allUnorderedLists = document.getElementsByTagName('ul'); // 'getElementsByTagName'返回的是一個節點集合// - 和數組有點相似
getElementsByTagName
getElementsByTagName方法返回的是一個節點集合，和數組類似也有length屬性，重要的一個特性是他是live的——如果你在該元素裡添加一個新的li元素，這個集合就會自動更新，介於他和數群組類型，所以可以和訪問數組一樣的方法來訪問，所以從0開始：
// 訪問無序列表: [0]索引var unorderedList = document.getElementsByTagName('ul')[0];// 擷取所有的li集合: var allListItems = unorderedList.getElementsByTagName('li');// 迴圈遍曆for (var i = 0, length = allListItems.length; i < length; i++) { // 彈出該節點的text內容 alert(allListItems[i].firstChild.data);}
以例更清晰地展示了DOM擷取的知識：
DOM穿梭“穿梭”這個詞主要是用來描述通過DOM尋找節點，DOM API提供了大量的節點屬性讓我們來往上或者往下查詢節點。
所有的節點都有這些屬性，都是可以用於訪問相關的node節點：
通過這張圖，理解起來就簡單多了，但有個非常重要的知識點：那就是元素之間不能有空格，如果ul和li之間有空格的話，就會被認為是內容為空白的text node節點，這樣ul.childNodes[0]就不是第一個li元素了。相應地，<p>的下一個節點也不是<ul>，因為<p>和<ul>之間有一個空行的節點，一般遇到這種情況需要遍曆所有的子節點然後判斷nodeType類型，1是元素，2是屬性，3是text節點，詳細的type類型可以通過此地址：
Node.ELEMENT_NODE == 1 Node.ATTRIBUTE_NODE == 2 Node.TEXT_NODE == 3 Node.CDATA_SECTION_NODE == 4 Node.ENTITY_REFERENCE_NODE == 5 Node.ENTITY_NODE == 6 Node.PROCESSING_INSTRUCTION_NODE == 7 Node.COMMENT_NODE == 8 Node.DOCUMENT_NODE == 9 Node.DOCUMENT_TYPE_NODE == 10 Node.DOCUMENT_FRAGMENT_NODE == 11 Node.NOTATION_NODE == 12總結
原生的DOM方法和屬性足夠我們日常的應用了，本章節我們只列舉了一些例子，下一章節我們列舉更多的例子，還會包括瀏覽器事件模型。
著作權聲明：本文為博主http://www.zuiniusn.com原創文章，未經博主允許不得轉載。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
