getAttribute()方法

至此，我們已經(jīng)向大家介紹了兩種檢索特定元素節(jié)點(diǎn)的辦法：一種是使用getElementById()方法，另一種是使用getElementsByTagName()方法。在找到那個(gè)元素后，我們就可以利用getAttribute()方法把它的各種屬性的值查詢出來。
getAttribute()方法是一個(gè)函數(shù)。它只有一個(gè)參數(shù)——你打算查詢的屬性的名字：
object.getAttribute(attribute)
不過，getAttribute()方法不能通過document對(duì)象調(diào)用，這與我們此前介紹過的其他方法不同。我們只能通過一個(gè)元素節(jié)點(diǎn)對(duì)象調(diào)用它。
例如，你可以把它與getElementsByTagName()方法結(jié)合起來，去查詢每個(gè)<p>元素的title屬性，如下所示：

var text=document.getElementsByTagName("p")
for (var i=0;i<text.length;i++)
{
alert(text[i].getAttribute("title"));
}

如果把上面這段代碼插入到前面給出的“購物清單”示例文檔的末尾，并在Web瀏覽器里重新加載這個(gè)頁面，屏幕上將彈出一個(gè)顯示著文本消息“a gentle reminder”的alter對(duì)話框。
在“購物清單”文檔里只有一個(gè)帶有title屬性的<p>元素。假如這份文檔還有一個(gè)或更多個(gè)不帶title屬性的<p>元素，則相應(yīng)的getAttribute("title")調(diào)用將返回null。null是JavaScript語言中的空值，其含義是“你說的這個(gè)東西不存在”。如果你們想親自驗(yàn)證一下這件事，請(qǐng)先把下面這段文本插入到“購物清單”文檔中的現(xiàn)有文本段落之后：
<p>This is just test</p>
然后重新加載這個(gè)頁面。這一次，你們將看到兩個(gè)alter對(duì)話框，而第二個(gè)對(duì)話框?qū)⑹且黄瞻谆蛘呤侵伙@示著單詞“null”——具體情況要取決于你的Web瀏覽器將如何顯示null值。
可以修改我們的腳本，讓它只在title屬性存在時(shí)才彈出一條消息。我們將增加一條if語句來檢查getAttribute()方法的返回值是不是null。趁著這個(gè)機(jī)會(huì)，我們還增加了幾個(gè)變量以提高腳本的可讀性：

var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");
if(text!=null)
{
alert(text)
}
}

現(xiàn)在，如果重新加載這個(gè)頁面，你們將只會(huì)看到一個(gè)顯示著“a gentle reminder”消息的alter對(duì)話框，如下所示。
我們甚至可以把這段代碼縮得更短一些。當(dāng)檢查某項(xiàng)數(shù)據(jù)是否是null值時(shí)，我們其實(shí)是在檢查它是否存在。這種檢查可以簡化為直接把被檢查的數(shù)據(jù)用做if語句的條件。if (something)與if (something != null)完全等價(jià)，但前者顯然更為簡明。此時(shí)，如果something存在，則if語句的條件將為真；如果something不存在，則if語句的條件將為假。
具體到這個(gè)例子，只要我們把if (title_text != null)替換為if (title_text)，我們就可以得到更簡明的代碼。此外，為了進(jìn)一步增加代碼的可讀性，我們還可以趁此機(jī)會(huì)把a(bǔ)lter語句與if語句寫在同一行上，這可以讓它們更接近于我們?nèi)粘Ｉ钪械挠⒄Z句子：

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()方法與它們有一個(gè)本質(zhì)上的區(qū)別：它允許我們對(duì)屬性節(jié)點(diǎn)的值做出修改。
類似于getAttribute()方法，setAttribute()方法也是一個(gè)只能通過元素節(jié)點(diǎn)對(duì)象調(diào)用的函數(shù)，但setAttribute()方法需要我們向它傳遞兩個(gè)參數(shù)：
obiect.setAttribute(attribute,value)
在下面的例子里，第一條語句將把id屬性值是purchase的元素檢索出來，第二條語句將把這個(gè)元素的title屬性值設(shè)置為a list of goods：

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

我們可以利用getAttribute()方法來證明這個(gè)元素的title屬性值確實(shí)發(fā)生了變化：

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

上面這些語句將在屏幕上彈出兩個(gè)alert對(duì)話框：第一個(gè)alter對(duì)話框出現(xiàn)在setAttribute()方法被調(diào)用之前，它將是一片空白或顯示著單詞“null”；第二個(gè)出現(xiàn)在title屬性值被設(shè)置之后，它將顯示著“a list of goods”消息。
在上例中，我們?cè)O(shè)置了一個(gè)現(xiàn)有節(jié)點(diǎn)的title屬性，但這個(gè)屬性原先并不存在。這意味著我們發(fā)出的setAttribute()調(diào)用實(shí)際完成了兩項(xiàng)操作：先把這個(gè)屬性創(chuàng)建出來，然后再對(duì)其值進(jìn)行設(shè)置。如果我們把setAttribute()方法用在元素節(jié)點(diǎn)的某個(gè)現(xiàn)有屬性上，這個(gè)屬性的當(dāng)前值將被覆蓋。
在“購物清單”示例文檔里，<p>元素已經(jīng)有了一個(gè)title屬性，這個(gè)屬性的值是a gentle reminder。我們可以用setAttribute()方法來改變它的當(dāng)前值：

<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","我會(huì)成功！")
alert(ts[i].getAttribute("title"))
}
}

上面這段代碼將先從文檔里把已經(jīng)帶有title屬性的<p>元素全部檢索出來，然后把它們的title屬性值全部修改為brand new title text。具體到“購物清單”文檔，屬性值a gentle reminder將被覆蓋。
這里有一個(gè)非常值得關(guān)注的細(xì)節(jié)：通過setAttribute()方法對(duì)文檔做出的修改，將使得文檔在瀏覽器窗口里的顯示效果和/或行為動(dòng)作發(fā)生相應(yīng)的變化，但我們?cè)谕ㄟ^瀏覽器的view source（查看源代碼）選項(xiàng)去查看文檔的源代碼時(shí)看到的仍將是原來的屬性值——也就是說，setAttribute()方法做出的修改不會(huì)反映在文檔本身的源代碼里。這種“表里不一”的現(xiàn)象源自DOM的工作模式：先加載文檔的靜態(tài)內(nèi)容、再以動(dòng)態(tài)方式對(duì)它們進(jìn)行刷新，動(dòng)態(tài)刷新不影響文檔的靜態(tài)內(nèi)容。這正是DOM的真正威力和誘人之處：對(duì)頁面內(nèi)容的刷新不需要最終用戶在他們的瀏覽器里執(zhí)行頁面刷新操作就可以實(shí)現(xiàn)。

最新評(píng)論