JavaScript學習——DOM獲取和設定屬性
阿新 • • 發佈:2019-02-05
1.getAttribute是一個函式。它只有一個引數——你打算查詢的屬性的名字:
object.getAttribute(attribute)
getAttribute方法不屬於document物件,所以不能通過document物件進行呼叫。例如,可以與getElementsByTagName方法合用。
獲取每個<ul>元素的class屬性,如下所示:
<script> var paras = document.getElementsByTagName("ul"); for(var i=0;i < document.getElementsByTagName("ul").length;i++){ if(paras[i].getAttribute("class")){ alert(paras[i].getAttribute("class")); } } </script>
在這裡已經對程式做了處理,如果文件中有多個<ul>元素,並且其中幾個<ul>元素沒有class屬性值,那麼getAttribute("class")方法會返回"null"。所以加了一個if判斷,如果非null就alert。
2.setAttribute
之前的方法都是用來獲取資訊的,這個方法有點不同:它允許我們對屬性節點的值做出修改。與getAttribute一樣,setAttribute也只能用於元素節點:
object.setAttribute(attribute,value)
例如我們先寫一個div並且設定它的class屬性:
然後去css檔案中分別寫兩個不同型別的樣式:<div class="one" id="zc_1"> </div>
.one{
width: 100%;
height: 200px;
background-color: red;
}
.two{
width: 100%;
height: 200px;
background-color: blue;
}
然後我們試著用setAttribute方法來改變div的class值:
重新整理瀏覽器會發現,div從紅色變成了藍色,並且getAttribute("class")返回的結果也是 "two"<script> var shopping = document.getElementById("zc_1"); shopping.setAttribute("class","two"); alert(shopping.getAttribute("class")); </script>
還有一個非常值得關注的細節:通過setAttribute對文件做出修改後,在通過瀏覽器檢視HTML的時候會發現class仍然是改變前的屬性值。也就是說setAttribute做出的修改並不會直接反應在文件本身的原始碼裡。
這種表裡不一的現象源自DOM的工作模式:先載入文件的靜態內容,再動態重新整理,動態重新整理不影響文件的靜態內容。這正是DOM的真正威力:對頁面內容進行重新整理卻不需要在瀏覽器裡重新整理頁面。