文檔對象模型Document Object Model

DOM（Document Object Model，文檔對象模型）是一個通過和JavaScript進行內(nèi)容交互的API。Javascript和DOM一般經(jīng)常作為一個整體，因為Javascript通常都是用來進行DOM操作和交互的。

主要內(nèi)容來自：http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/

關(guān)于DOM，有些知識需要注意：
1. window對象作為全局對象，也就是說你可以通過window來訪問全局對象。

?屬性在對象下面以變量的形式存放，在頁面上創(chuàng)建的所有全局對象都會變成window對象的屬性。
方法在對象下面以函數(shù)的形式存放，因為左右的函數(shù)都存放在window對象下面，所以他們也可以稱為方法。

2. DOM為web文檔創(chuàng)建帶有層級的結(jié)果，這些層級是通過node節(jié)點組成，這里有幾種DOM node類型，最重要的是Element, Text, Document。

?Element節(jié)點在頁面里展示的是一個元素，所以如果你有段落元素(
)，你可以通過這個DOM節(jié)點來訪問。
?Text節(jié)點在頁面里展示的所有文本相關(guān)的元素，所以如果你的段落有文本在里面的話，你可以直接通過DOM的Text節(jié)點來訪問這個文本
?Document節(jié)點代表是整個文檔，它是DOM的根節(jié)點。

3. 每個引擎對DOM標準的實現(xiàn)有一些輕微的不同。例如，F(xiàn)irefox瀏覽器使用的Gecko引擎有著很好的實現(xiàn)（盡管沒有完全遵守W3C規(guī)范），但IE瀏覽器使用的Trident引擎的實現(xiàn)卻不完整而且還有bug，給開發(fā)人言帶來了很多問題。

如果你正在使用Firefox，我推薦你立即下載Firebug插件，對于你了解DOM結(jié)構(gòu)非常有用。

Web上的JavaScript

Script元素

當(dāng)你在網(wǎng)站頁面上使用JavaScript的時候，需要使用SCRIPT元素：

       <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">              //                   // ]]>  script>                body>      html>

上述代碼，嚴格來說SCRIPT的TYPE屬性應(yīng)該設(shè)置為application/javascript，但是由于IE不支持這個，所以平時我們不得不寫成text/javascript或者直接去掉type。另外你也可以看到在SCRIPT元素里的注釋行// ，瀏覽器就不會再解析成XHTML標簽了。

Defer屬性

任何在SCRIPT元素里聲明的代碼在頁面加載的時候都會運行，唯一一個例外是給SCRIPT元素加上一個defer屬性。defer屬性告訴瀏覽器加載完HTML文檔以后再執(zhí)行JS代碼，但這個屬性只能在IE下使用。

連接外部腳本

如果你想了解外部腳本，只需要簡單地在SCRIPT上使用SRC屬性就行了，使用單獨的JS文件的好處是可以緩存，而且也不需要擔(dān)心CDATA方面的問題：


<script type="text/javascript" src="my-script.js">script>

JavaScript必備

在我們繼續(xù)DOM之前，我們來復(fù)習(xí)一下JavaScript的核心必備知識，如果你還不了解，也沒關(guān)系，我們在這一章節(jié)將稍微花點時間來回顧一下。

JavaScript有幾種數(shù)據(jù)類型：Number, String, Boolean, Object, Undefined and Null。

單行注釋使用雙斜杠//，雙斜杠后面的所有文字都會被注釋掉，多行注意使用/*和*/括住。

Number

在JavaScript里所有的Number都是浮點型的，當(dāng)聲明一個數(shù)字變量的時候，記得不要使用任何引號。


// 注：使用var類聲明變量var leftSide = 100;var topSide = 50;var areaOfRectangle = leftSide * topSide; // = 5000

String

JavaScript里聲明字符串特別簡單，和其它語言一樣，在JS里使用單引號或雙引號都可以。


var firstPart = 'Hello';var secondPart = 'World!';var allOfIt = firstPart + ' ' + secondPart; // Hello World!// +符合是字符連接符。也用于數(shù)字相加

Boolean

布爾類型用于條件判斷，布爾類型是只有2個值：true和false。任何使用邏輯操作符的比較都會返回布爾值。


5 === (3 + 2); // = true// 你也可以將布爾值賦給一個變量var veryTired = true;// 這樣使用if (veryTired) {    // 執(zhí)行代碼     }

===也是比較操作符，不僅比較數(shù)值，還比較類型。

Function

函數(shù)是特殊的對象。


// 使用function操作符來聲明新函數(shù)  function myFunctionName(arg1, arg2) {    // 函數(shù)代碼}
// 你也可以聲明匿名函數(shù) function (arg1, arg2) {    // Function code goes here.  }
// 運行函數(shù)很簡單，直接在函數(shù)名稱后面加上小括號就可以了// 或者也可以帶上參數(shù)myFunctionName(); // 無參myFunctionName('foo', 'bar'); // 有參數(shù)
// 也可以使用自調(diào)用  
(function () {    // 這里自調(diào)用函數(shù)})();

Array

數(shù)組也是特殊的對象，它包含了一批值（或?qū)ο螅?，訪問這些數(shù)據(jù)的話需要使用數(shù)字索引：


// 2種方式聲明數(shù)組
// 字面量:  var fruit = ['apple', 'lemon', 'banana'];
// Array構(gòu)造函數(shù):  var fruit = new Array('apple', 'lemon', 'banana');
fruit[0]; // 訪問第1個項(apple)  fruit[1]; // 訪問第2個項(lemon)  fruit[2]; // 訪問第3個項(banana)

Object

一個對象是一個key-value的集合，和數(shù)組相似，唯一的不同是你可以為每個數(shù)據(jù)定義一個名稱。


// 2種類型定義Object對象
// 字面量（大括號）var profile = {    name: 'Bob',    age: 99,    job: 'Freelance Hitman'};
// 使用Object構(gòu)造函數(shù)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循環(huán)

Loop循環(huán)在是遍歷數(shù)組或者對象的所有成員的時候非常方便，JavaScript里使用最多的是FOR和WHILE語句。


var envatoTutSites = ['NETTUTS', 'PSDTUTS', 'AUDIOTUTS', 'AETUTS', 'VECTORTUTS'];
// WHILE循環(huán)var counter = 0;var lengthOfArray = envatoTutSites.length;while (counter < lengthOfArray) {    alert(envatoTutSites[counter]);    counter++; // 等價于counter += 1;  }
// FOR循環(huán)// i只是用于迭代，可以任意取名 for (var i = 0, length = envatoTutSites.length; i < length; i++) {    alert(envatoTutSites[i]);}

DOM正文

訪問DOM節(jié)點

我們來個例子，一個HTML里包含一段文本和一個無序的列表。


  <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 1li>              <li>List item 1li>              <li>List item 1li>              <li>List item 1li>              <li>List item 1li>          ul>            <script type="text/javascript">          //           // ]]>  script>        body>  html>

上面例子里，我們使用getElementById DOM方法來訪問p段落，在SCRIPT里添加如下代碼：


var introParagraph = document.getElementById('intro');// 現(xiàn)在有了該DOM節(jié)點，這個DOM節(jié)點展示的是該信息段落

變量introParagraph現(xiàn)在已經(jīng)引用到該DOM節(jié)點上了，我們可以對該節(jié)點做很多事情，比如查詢內(nèi)容和屬性，或者其它任何操作，甚至可以刪除它，克隆它，或者將它移到到DOM樹的其它節(jié)點上。

文檔上的任何內(nèi)容，我們都可以使用JavaScript和DOM API來訪問，所以類似地，我們也可以訪問上面的無序列表，唯一的問題是該元素沒有ID屬性，如果ID的話就可以使用相同的方式，或者使用如下getElementsByTagName方式：


var allUnorderedLists = document.getElementsByTagName('ul');// 'getElementsByTagName'返回的是一個節(jié)點集合// - 和數(shù)組有點相似

getElementsByTagName

getElementsByTagName方法返回的是一個節(jié)點集合，和數(shù)組類似也有l(wèi)ength屬性，重要的一個特性是他是live的——如果你在該元素里添加一個新的li元素，這個集合就會自動更新，介于他和數(shù)組類型，所以可以和訪問數(shù)組一樣的方法來訪問，所以從0開始：


// 訪問無序列表: [0]索引var unorderedList = document.getElementsByTagName('ul')[0];
// 獲取所有的li集合:  var allListItems = unorderedList.getElementsByTagName('li');
// 循環(huán)遍歷for (var i = 0, length = allListItems.length; i < length; i++) {    // 彈出該節(jié)點的text內(nèi)容    alert(allListItems[i].firstChild.data);}

以下圖例更清晰地展示了DOM獲取的知識：

DOM穿梭

“穿梭”這個詞主要是用來描述通過DOM查找節(jié)點，DOM API提供了大量的節(jié)點屬性讓我們來往上或者往下查詢節(jié)點。

所有的節(jié)點都有這些屬性，都是可以用于訪問相關(guān)的node節(jié)點：

Node.childNodes: 訪問一個單元素下所有的直接子節(jié)點元素，可以是一個可循環(huán)的類數(shù)組對象。該節(jié)點集合可以保護不同的類型的子節(jié)點（比如text節(jié)點或其他元素節(jié)點）。
Node.firstChild: 與‘childNodes’數(shù)組的第一個項(‘Element.childNodes[0]‘)是同樣的效果，僅僅是快捷方式。
Node.lastChild: 與‘childNodes’數(shù)組的最后一個項(‘Element.childNodes[Element.childNodes.length-1]‘)是同樣的效果，僅僅是快捷方式。shortcut.
Node.parentNode: 訪問當(dāng)前節(jié)點的父節(jié)點，父節(jié)點只能有一個，祖節(jié)點可以用‘Node.parentNode.parentNode’的形式來訪問。
Node.nextSibling: 訪問DOM樹上與當(dāng)前節(jié)點同級別的下一個節(jié)點。
Node.previousSibling: 訪問DOM樹上與當(dāng)前節(jié)點同級別的上一個節(jié)點。

通過這張圖，理解起來就簡單多了，但有個非常重要的知識點：那就是元素之間不能有空格，如果ul和li之間有空格的話，就會被認為是內(nèi)容為空的text node節(jié)點，這樣ul.childNodes[0]就不是第一個li元素了。

相應(yīng)地，

的下一個節(jié)點也不是

和

https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType


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

總結(jié)

原生的DOM方法和屬性足夠我們?nèi)粘５膽?yīng)用了，本文我們只列舉了一些例子，下篇我們列舉更多的例子，還會包括瀏覽器事件模型。

JavaScript與DOM（上）