javascript之getAttribute()方法 應用續

getAttribute()方法

 ●一份文檔就是一棵節點樹。

  ●節點分為不同的類型：元素節點、屬性節點和文本節點等。

  ●getElementById()方法將返回一個對象，該對象對應著文檔裡的一個特定的元素節點。

  ●getElementsByTagName()方法將返回一個對象數組，它們分別對應著文檔裡的一個特定的元素節點。

  ●這些節點中的每個都是一個對象。

接下來，我們將向大家介紹幾個與這些對象相關聯的屬性和方法。

3.4.1　getAttribute()方法

至此，我們已經向大家介紹了兩種檢索特定元素節點的辦法：一種是使用getElementById()方法，另一種是使用getElementsByTagName()方法。在找到那個元素後，我們就可以利用getAttribute()方法把它的各種屬性的值查詢出來。

getAttribute()方法是一個函數。它只有一個參數——你打算查詢的屬性的名字：

object.getAttribute(attribute)
不過，getAttribute()方法不能通過document對象調用，這與我們此前介紹過的其他方法不同。我們只能通過一個元素節點對象調用它。

例如，你可以把它與getElementsByTagName()方法結合起來，去查詢每個<p>元素的title屬性，如下所示：
var text=document.getElementsByTagName("p")
for (var i=0;i<text.length;i++)
{
alert(text[i].getAttribute("title"));

}
如果把上面這段代碼插入到前面給出的“購物清單”範例文件的末尾，並在Web瀏覽器裡重新載入這個頁面，螢幕上將彈出一個顯示著簡訊“a gentle reminder”的alter對話方塊。

在“購物清單”文檔裡只有一個帶有title屬性的<p>元素。假如這份文檔還有一個或更多個不帶title屬性的<p>元素，則相應的getAttribute("title")調用將返回null。null是JavaScript語言中的空值，其含義是“你說的這個東西不存在”。如果你們想親自驗證一下這件事，請先把下面這段文本插入到“購物清單”文檔中的現有文本段落之後：
<p>This is just test</p>
然後重新載入這個頁面。這一次，你們將看到兩個alter對話方塊，而第二個對話方塊將是一片空白或者是只顯示著單詞“null”——具體情況要取決於你的Web瀏覽器將如何顯示null值。

可以修改我們的指令碼，讓它只在title屬性存在時才彈出一條訊息。我們將增加一條if語句來檢查getAttribute()方法的傳回值是不是null。趁著這個機會，我們還增加了幾個變數以提高指令碼的可讀性：
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");

if(text!=null)
{
alert(text)
}
}
現在，如果重新載入這個頁面，你們將只會看到一個顯示著“a gentle reminder”訊息的alter對話方塊，如下所示。

我們甚至可以把這段代碼縮得更短一些。當檢查某項資料是否是null值時，我們其實是在檢查它是否存在。這種檢查可以簡化為直接把被檢查的資料用做if語句的條件。if (something)與if (something != null)完全等價，但前者顯然更為簡明。此時，如果something存在，則if語句的條件將為真；如果something不存在，則if語句的條件將為假。

具體到這個例子，只要我們把if (title_text != null)替換為if (title_text)，我們就可以得到更簡明的代碼。此外，為了進一步增加代碼的可讀性，我們還可以趁此機會把alter語句與if語句寫在同一行上，這可以讓它們更接近於我們日常生活中的英語句子：
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");

if(text) alert(text)

}
3.4.2　setAttribute()方法

我們此前介紹給大家的所有方法都只能用來檢索資訊。setAttribute()方法與它們有一個本質上的區別：它允許我們對屬性節點的值做出修改。

類似於getAttribute()方法，setAttribute()方法也是一個只能通過元素節點對象調用的函數，但setAttribute()方法需要我們向它傳遞兩個參數：

obiect.setAttribute(attribute,value)
在下面的例子裡，第一條語句將把id屬性值是purchase的元素檢索出來，第二條語句將把這個元素的title屬性值設定為a list of goods：

var shopping=document.getElementById("purchases")
shopping.setAttribute("title","a list of goods")
我們可以利用getAttribute()方法來證明這個元素的title屬性值確實發生了變化：
var shopping=document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));
上面這些語句將在螢幕上彈出兩個alert對話方塊：第一個alter對話方塊出現在setAttribute()方法被調用之前，它將是一片空白或顯示著單詞“null”；第二個出現在title屬性值被設定之後，它將顯示著“a list of goods”訊息。

在上例中，我們設定了一個現有節點的title屬性，但這個屬性原先並不存在。這意味著我們發出的setAttribute()調用實際完成了兩項操作：先把這個屬性建立出來，然後再對其值進行設定。如果我們把setAttribute()方法用在元素節點的某個現有屬性上，這個屬性的當前值將被覆蓋。

在“購物清單”範例文件裡，<p>元素已經有了一個title屬性，這個屬性的值是a gentle reminder。我們可以用setAttribute()方法來改變它的當前值：

<script type="text/javascript">
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{
var text=ts[i].getAttribute("title");
alert(ts[i].getAttribute("title"))
if(text)
{
ts[i].setAttribute("title","我會成功！")
alert(ts[i].getAttribute("title"))
}
}
上面這段代碼將先從文檔裡把已經帶有title屬性的<p>元素全部檢索出來，然後把它們的title屬性值全部修改為brand new title text。具體到“購物清單”文檔，屬性值a gentle reminder將被覆蓋。

這裡有一個非常值得關注的細節：通過setAttribute()方法對文檔做出的修改，將使得文檔在瀏覽器視窗裡的顯示效果和/或行為動作發生相應的變化，但我們在通過瀏覽器的view source（查看原始碼）選項去查看文檔的原始碼時看到的仍將是原來的屬性值——也就是說，setAttribute()方法做出的修改不會反映在文檔本身的原始碼裡。這種“表裡不一”的現象源自DOM的工作模式：先載入文檔的靜態內容、再以動態方式對它們進行重新整理，動態重新整理不影響文檔的靜態內容。這正是DOM的真正威力和誘人之處：對頁面內容的重新整理不需要終端使用者在他們的瀏覽器裡執行頁面重新整理操作就可以實現。