JavaScript中getAttribute的使用介紹

在我們開發過程中，相信小夥伴們都知道JavaScript中的getAttribute()方法是一個函數、getAttribute()只有一個參數－你打算查詢#的屬性的名字,今天我們就來跟大家介紹下JavaScript中getAttribute的使用介紹！

getAttribute()方法

至此，我們已經向大家介紹了兩種檢索特定元素節點的方法：一種是使用getElementById()方法，另一種是使用getElementsByTagName()方法。在找到那個元素後，我們就可以利用getAttribute()方法把它的各種屬性的值查詢出來。
getAttribute()方法是一個函數。它只有一個參數－你打算查詢的屬性的名字：
object.getAttribute(attribute)
不過，getAttribute()方法不能透過document物件調用，這與我們先前介紹過的其他方法不同。我們只能透過一個元素節點物件來呼叫它。
例如，你可以把它與getElementsByTagName()方法結合起來，去查詢每個e388a4556c0f65e1904146cc1a846bee元素的title屬性，如下所示：

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

如果把上面這段程式碼插入到前面給出的「購物清單」範例文件的末尾，並在網頁瀏覽器裡重新載入這個頁面，螢幕上將彈出一個顯示著文字訊息「a gentle reminder」的alter對話框。
在「購物清單」文件裡只有一個有title屬性的e388a4556c0f65e1904146cc1a846bee元素。假如這份文件還有一個或更多個不帶title屬性的e388a4556c0f65e1904146cc1a846bee元素，則對應的getAttribute("title")呼叫將傳回null。 null是JavaScript語言中的空值，其意義是「你說的這個東西不存在」。如果你們想親自驗證一下這件事，請先把下面這段文字插入到「購物清單」文件中的現有文字段落之後：

<p>This is just test</p>

然後重新載入這個頁面。這次，你們將看到兩個alter對話框，而第二個對話框將是一片空白或只顯示著單字「null」——具體情況要取決於你的網頁瀏覽器將如何顯示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()方法用在元素节点的某个现有属性上，这个属性的当前值将被覆盖。
在“购物清单”示例文档里，e388a4556c0f65e1904146cc1a846bee元素已经有了一个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属性的e388a4556c0f65e1904146cc1a846bee元素全部检索出来，然后把它们的title属性值全部修改为brand new title text。具体到“购物清单”文档，属性值a gentle reminder将被覆盖。
这里有一个非常值得关注的细节：通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。

总结：

相信小伙伴们通过本文的认真学习以后，对JavaScript中getAttribute的使用有了进一步的了解和认识，希望通过本文介绍对你的工作有所帮助！

相关推荐：

javascript setAttribute, getAttribute 在不同浏览器上的不同表现

js中 aaa.style 和 aaa.getAttribute('style') 等价吗，有无区别？

有趣的script标签用getAttribute方法来自脚本吧

以上是JavaScript中getAttribute的使用介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！