JavaScript 第三課 DOM

主要內容：

節點
5個常用的DOM方法：

????getElementById、getElementByTagname、getElementByClassName、getAttribute和setAttribute

詳細內容:

1、文檔：DOM中的“D”

? ? 如果沒有document(文檔),DOM也就無從談起。當創建了一個網頁并把它加載到Web瀏覽器中時，DOM就在幕后悄然而生。它把你編寫的網頁文檔轉換為一個文檔對象。

2、對象：DOM中的“O”

對象是一種自足的數據集合。與特定某個對象相關聯的變量成為這個對象的屬性；只能通過某個特定對象去調用的函數稱為這個對象的方法。

JavaScript語言中的對象可以分為三種類型。

用戶定義對象：由程序員自從創建的對象。

內建對象：內建在JavaScript語言里的對象，例如Array、Math和Date等。

宿主對象：由瀏覽器提供的對象。

3、模型：DOM中的"M"

? ? DOM中的”M“代表著”Model“(模型)，但說它代表著”Map“(地圖)也是可以的。但他們都是某種事物的表現形式。就像一個模型火車代表著一列真正的火車那樣。DOM代表著加載到瀏覽器窗口的當前網頁。瀏覽器提供了網頁的地圖（或者說模型），而我們可以通過JavaScript去讀取這張地圖。

? ? 要想從DOM獲得信息，必須先把各種表示和描述文檔的"圖例"弄明白。

? ? DOM把一份文檔表示為一顆樹，這是我們理解和運用這一模型的關鍵。更具體地說，DOM把文檔表示為一顆家譜樹。

? ? 家譜樹本身又是一種模型。家譜樹的典型做法是表示一個人類家族的譜系，并使用parent(父)、child(子)、sibling(兄弟)等記號來表明家族成員之間的關系。

? ? 家譜樹模型本身非常適合用來表示一份用(X)HTML語言編寫出來的文檔。

下面是一份非常基本的網頁，內容是一份購物清單。

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "utf-8"/><title>Shopping list</title></head><body>	<h1>What to buy</h1><p title= "a gentle reminder">Don't forget to buy this stuff.</p><ul id = "purchases"><li>a tin of beans</li><li class = "sale">Cheese</li><li class = "sale important">Milk</li></ul></body>
</html>

我們來分析一下：在DOCTYPE之后，一個打開了的<html>標簽標識了整個文檔的開始，這個網頁里的所有其他元素都包含在這個元素里面，這表示它至少是一個父親(parent)。又因為所有其他的元素都包含在其內部，所以這個<html>標簽既沒有父親，也沒有兄弟，這個<html>就是樹根。

? ? 根元素是html，不管從哪個角度來看，html都是代表整個文檔。

? ? 接下來深入一層，我們發現有<head>和<body>兩個分支。

.....

如果把一個文檔的各個元素想象成一顆家譜樹，我們就可以用同樣的數據描述DOM，不過，與使用"家譜樹"這個術語相比，把文檔稱為"節點樹"更準確。

4、節點

? ? 節點(node)表示網絡中的一個連接點。一個網絡就是由一些節點構成的集合。

? ? 原子是現實世界中的節點。文檔是由節點構成的集合，只不過此時的節點是文檔樹上的樹枝和樹葉而已。

? ? 在DOM里有許多不同類型的節點。就像原子包含著亞原子顆粒那樣，也有很多類型的DOM節點包含著其他類型的節點。先看其中的三種：元素節點、文本節點、屬性節點。

????所謂元素節點：DOM的原子就是元素節點(element node)。

? ? 在上面那份"購物清單"文檔時，我們使用了諸如<body>、<p>和<ul>之類的元素。如果把Web上的文檔比作大廈，元素就是建造這座大廈的磚塊，這些元素在文檔的布局形成了文檔的結構。標簽的名字就是元素的名字。文本段落元素的名字是"p"，無序清單元素的名字是"ul"，列表項的名字是"li"。

? ? 元素可以包含其他元素。在上面那份"購物清單"文檔里，所有的列表項元素都包含在一個無序清單元素的內容。

????所謂"文本節點"：在上面那份"購物清單"文檔里，<p>元素包含著”Don't forget to buy this stuff.“它是一個文本節點。（text node）在XHTML文檔中，文本節點總是被包含在元素節點的內部。但并非所有的元素節點都包含有文本節點。

????所謂"屬性節點"：屬性節點用來對元素做出更具體的描述。幾乎所有元素都有一個title屬性，而我們可以利用這個屬性對包含在元素里的東西做出準確的描述：

? ? <p title = "a gentle reminder">Don't forget to buy this stuff.</p>

CSS

????DOM并不是與網頁結構打交道的唯一技術，我們還可以通過CSS（層疊樣式表）告訴瀏覽器怎么顯示一份文檔的內容。

? ? 類似JavaScript腳本，對樣式的聲明既可以嵌在文檔的<head>部分(<style>標簽之間，也可以放在另外一個樣式表文件里)。CSS聲明元素樣式的語法與JavaScript函數的定義語法很相似：

selector{

? ? property:value;

}

在樣式聲明里，我們可以定義瀏覽器在顯示元素時使用的顏色、字體和字號，如下：

color:yellow;

font-family:"arial",sans-serif;

font-size:1.2em}

????????繼承(inheritance)是CSS技術中的一項強大功能，例如：如果我們為body元素定義了一些顏色或字體，包含在body所有元素都將自動獲得哪些樣式。

????? ?在某些場合，當樣式應用于一份文檔時，我們其實只想讓那些樣式作用于某個特定的元素。

? ??? ? 為了把某一個或幾個元素與其他元素區別開來，需要使用class屬性或id屬性。

????? ? 1、class屬性

你可以在所有元素上任意應用class屬性：

<p class = "special">This paragraph has the special class </p>

<h2? class = "special">So does this headline</h2>

在樣式表里，可以像下面這樣為class屬性值相同的所有元素定義同一種樣式：

.special{

????font-style:italic;

}

還可以像下面這樣利用class屬性為一種特定類型的元素定義一種特定的樣式:

h2.special{

text-transform:uppercase;

}

? ? 2、id屬性

id屬性的用途是給網頁里的某個元素加上一個獨一無二的標識符，如下：

在這樣的樣式表里，可以像下面這樣為有特定id屬性值的元素定義一種獨享的樣式：

#purchases{

????border: 1px solid white;

????background-color:#333

????color:#ccc;

????padding:1em

}

盡管id本身只能使用一次，樣式表還是可以利用id屬性為包含在該特定元素里的其他元素定義樣式。例如：

#purchases li{

????font-weight:bold;

}

id屬性就像是一個掛鉤，它一頭連著文檔里的某個元素，另一頭連著CSS樣式表里的某個樣式，DOM也可以使用這種掛鉤。

獲取元素

有3種方法可以獲取元素節點，分別是通過元素id、通過標簽名字和類名字來獲取。

1、getElementById

????DOM提供了一個名為getElementById的方法，這個將返回一個與那個有著給定id屬性值得元素節點對應的對象。但是請注意：JavaScript區分大小寫。

? ? 它是document對象所特有的函數，在腳本代碼里，函數名的后面必須有一對圓括號，這對圓括號包含著函數的參數。getElementById方法只有一個參數：就是你想要獲得那個元素的id屬性的值，這個值必須放在單引號或者雙引號里。

document.getElementById(id)；

下面是一個例子：

document.getElementById("purchases")

???????這個調用將返回一個對象，這個對象對應著document對象里的獨一無二的元素，那個元素的HTMLid屬性值是purchases。你可以用typeof操作符來驗證這一點。typeof操作符可以告我們它的操作數是一個字符串、數值、函數、布爾值還是對象。

如下：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "utf-8"/><title>Shopping list</title></head><body>	<h1>What to buy</h1><p title= "a gentle reminder">Don't forget to buy this stuff.</p><ul id = "purchases"><li>a tin of beans</li><li class = "sale">Cheese</li><li class = "sale important">Milk</li></ul><script>alert(typeof document.getElementById("purchases"));</script></body>
</html>

運行之后，會彈出一個alert對話框，報告書document.getElementById("purchases")的類型-它是一個對象。

事實上，文檔中的每一個對象都是一個對象。利用DOM提供的方法可以得到任何一個對象。但是我們沒有必要為為文檔中的每一個元素都定義一個獨一無二的id值。DOM提供了另一個方法來獲取那些沒有id屬性的對象。

????2、getElementsByTagName

getElementByTagName方法返回一個對象數組，每個對象分別對應著文檔里有著給定標簽的一個元素。類似于getElementById，這個方法也是只有一個參數的函數，它的參數是標簽的名字：

element.getElementsByTagName(tag)

它與getElementById方法有許多類似之處，但是它返回的是一個數組。

例子：

document.getElementByTagName("li")，這個調用將返回一個對象數組，每個對象分別對應著document對象中的一個列表項元素。與任何其他的數組一樣，我們可以利用length屬性查出這個數組里的元素個數。

我們把原來的里中的<script>標簽中的alert語句替換成這條語句：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "utf-8"/><title>Shopping list</title></head><body>	<h1>What to buy</h1><p title= "a gentle reminder">Don't forget to buy this stuff.</p><ul id = "purchases"><li>a tin of beans</li><li class = "sale">Cheese</li><li class = "sale important">Milk</li></ul><script>alert(document.getElementsByTagName("li").length);</script></body>
</html>

你會看到這份文檔里的列表項元素的個數：3。這個數組里的每個元素都是一個對象。可以利用循環語句和typeof操作符去遍歷這個數組來驗證這一點。例如：

for(var i = 0;i<document.getElementsByTagName("li").length;i++){

alert(typeof document.getElementByTagName("li")[i]);

}

注意:即使在整個文檔里這個標簽里只有一個元素，getElementByTagName也返回一個數組，此時，那個數組的長度是1。

為了改善代碼的可讀性；只要把document.getElementByTagName("li")賦值給一個變量即可。

請把<script>標簽中的alert語句替換成下面這些語句：

var items = document.getElementsByTagName("li");

for(var i =0;i<items.length;i++){

????alert(typeof items[i])

}

即：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "utf-8"/><title>Shopping list</title></head><body>	<h1>What to buy</h1><p title= "a gentle reminder">Don't forget to buy this stuff.</p><ul id = "purchases"><li>a tin of beans</li><li class = "sale">Cheese</li><li class = "sale important">Milk</li></ul><script>var items = document.getElementsByTagName("li");for(var i =0;i<items.length;i++){alert(typeof items[i])}</script></body>
</html>

????我們可以到有三個alert對話框；顯示消息都是”object“。

此外：

????? ? getElementsByTagName允許把一個通配符作為它的參數，而這意味著文檔里的每個元素都將在這個函數所返回的數組里占有一席之地。通配符(星號字符"*")必須放在引號里，這是為了讓通配符與乘法操作符有所區別。如果你想知道某份文檔中有多少個元素節點，像下面這樣使用通配符即可:

????alert(document.getElementsByTagName("*").length);

還可以：

? ? 把getElementsByTagName()與getElementById()結合起來一起使用。如果只想知道id屬性值是purchases的元素包含了多少個列表項，必須通過一個更具體的對象去調用這個方法，如下：

????? ? var shopping = document.getElementById("purchases");

????? ? var items = shopping.getElementsByTagName("*");

這兩條語句執行完畢之后，items數據將只包含id屬性值是purchase的無序清單里的元素。具體到這個例子，items數組里的長度剛好與這份文檔里的列表項元素的總數相等：

alert(items.length)；

如果還需要跟多的證據，下面這些語句將證明items數組里的每個值確實一個對象：

for(var i = 0;i<items.length;i++){

????alert(typeof item[i]);

}

3、getElementsByClassName

HTML5 DOM中新增了一個令人期待已久的方法：getElementsByClassName。這個方法讓我們能夠通過class屬性中的類名來訪問元素。

與getElementsByTagName()方法類似，getElementsByClassName也是只接受一個參數，就是類名：

? ? getElementsByClassName(class)

這個方法與getElementsByTagName類似，都是一個具有相同類名的元素的數組。下面這行代碼返回的就是一個數組，其中包含類名為"sale"的所有元素:

document.getElementsByClassName("sale");

使用這個方法還可以查找那些帶有多個類名的元素。要指定多個類名，只要在字符串參數中用空格分隔類名即可。例如：

在<script>標簽中添加這行alert代碼：

alert(document.getElementsByClassName("important? sale").length);

你會發現只有一個元素同時帶有"important"和"sale"類名。注意：即使在元素的class屬性中，類名的順序是"sale important"而非參數指定的"important sale",也會照樣匹配該元素。不僅類名的實際順序不重要，就算元素還帶有更多的類名也沒有關系。

? ? 與使用getElementsByTagName一樣，也可以組合使用getElementsByClassName和getElementById。如果你想知道在id位"purchases"的元素中有多少類名包含"sale"列表項。可以先找到那個特定的對象，然后再調用getElementsByClassName:

var shopping = document.getElementById("purchases");

var sales = shopping.getElementsByClassName("sale");

這樣，sales數組中就包含的就只是位于"purchases"列表項中的帶有"sale"類的元素。

運行代碼：alert(sales.length);。

盤點知識點：

一份文檔就是一顆節點樹
節點分為不同的類型：元素節點、屬性節點和文本節點。
getElementById將返回一個對象，該對象對應著文檔里的一個特定元素節點。
getElementsByTagName和getElementsByClassName將返回一個對象數組，它們分別對應著文檔里的一組特定的元素節點。
每個節點都是一個對象。

5、獲取和設置屬性

我們有三種獲取特定元素的方法，得到需要的元素之后，我們就可以使用getAttribute方法獲取它的各個屬性。setAttribute()方法則可以更改屬性節點的值。

getAttribute方法不屬于document對象，所有不能通過document對象來調用。它之只能通過元素節點對象調用。可以通過getElementsByTagName方法合用，獲取每個<p>元素的title屬性，如下所示：

var paras = document.getElementsByTagName("p");

for(var i = 0;i < paras.length;i++){

???????alert(paras[i].getAttribute("title"));

}

例如：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "utf-8"/><title>Shopping list</title></head><body>	<h1>What to buy</h1><p title= "a gentle reminder">Don't forget to buy this stuff.</p><ul id = "purchases"><li>a tin of beans</li><li class = "sale">Cheese</li><li class = "sale important">Milk</li></ul><script>var paras = document.getElementsByTagName("p");for(var i = 0;i < paras.length;i++){alert(paras[i].getAttribute("title"));}</script></body>
</html>

會彈出什么呢？

在文檔文件中，只有一個p元素，并且它有title屬性。假如這份文檔有更多個<p>元素，并且沒有title屬性，則getAttribute("title")方法會返回null值。在JavaScript里面，null的含義是"沒有值"。我們可以試試再添加一個<p>標簽；

如：

<!DOCTYPE html>
<html lang = "en"><head><meta charset = "utf-8"/><title>Shopping list</title></head><body>	<h1>What to buy</h1><p title= "a gentle reminder">Don't forget to buy this stuff.</p><p>This is just a test </p><ul id = "purchases"><li>a tin of beans</li><li class = "sale">Cheese</li><li class = "sale important">Milk</li></ul><script>var paras = document.getElementsByTagName("p");for(var i = 0;i < paras.length;i++){alert(paras[i].getAttribute("title"));}</script></body>
</html>

重新加載這個頁面。會出現什么呢？

我們可以修該腳本，讓它只在title屬性有值時才彈出消息。我們增加一條if語句來檢查getAttribute的返回值是不是null。

如下：

var paras? = document.getElementsByTagName("p");

for(var i = 0;i <paras.length;i++){

????var title_text =paras[i].getAttribute("title");

????if(title_text != null)

????alert(title_texg);

}

重新加載，又會出現什么呢？

setAttribute

它允許我們對屬性節點的值做出修該。與getAttribute一樣。setAttribute也只能用于元素節點：

? ? object.setAttribute(attribute,value)

例子：

var shopping = document.getElementById("purchases");
alert (shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert (shopping.getAttribute("title"));

運行之后，會出現什么呢？

還有一個細節：通過setAttribute對文檔做出修改后，在通過瀏覽器的view source(查看源代碼)選項去查看文檔的源代碼時看到的仍然是改變前的屬性值，也就是說，setAttribute做出的修該不會反映在文檔本身的源代碼里。這種“表里不一”的現象源自DOM的工作模式：先加載文檔的靜態內容，在動態刷新，動態刷新不影響文檔的靜態內容。這是DOM的真正威力：對頁面內容進行刷新卻不需要在瀏覽器里刷新頁面。