1. 程式人生 > >Dom中獲取和設定屬性

Dom中獲取和設定屬性

獲取元素

一、getElementById

  1.它是document物件特有的函式。在指令碼程式碼裡,函式名的後面必須跟有一對圓括號,這對圓括號包含著函式的引數。getElementById方法只有一個引數:你想要獲得的那個元素的id屬性的值,這個id值必須放在單引號或者雙引號裡。即document.getElementById(id)。

                2.例如:document.getElementById("purchases")。

二、getElementsByTagName

          1.getElementByTagName方法返回一個物件陣列,每個物件分別對應著文件裡有著給定標籤的一個元素,類似於getElementById,這個方法也是隻有一個引數的函式,他的引數是標籤的名字。即document.getElementByTagName

(tag).

2.例如:document.getElementByTagName("purchases")。

三、getElementsByClassName

   1.此方法可以通過class屬性中的類名來訪問元素。不過,由於這個方法還比較新,某些DOM實現裡沒有,所以應當謹慎使用。例如下面這一行程式碼返回的是一個數組,其中包含類名為“sale”的所有元素

      2.例如document.getElementByClassName("purchases")。

獲取和設定屬性

一、getAttribute

           getAttribute是一個函式。他只有一個引數----打算查詢這個屬性的名字

      object.getAttribute(attribute)

注意:getAttribute方法不同於document物件,所以不能通過document物件使用。它只能通過元素節點物件是用。例如:可以用與getElementsByTagName方法合用,獲取每個<p>元素的title屬性。如下所示:

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

二、setAttribute

       setAttribute()與之前的不同:它允許我們對屬性節點的值做出修改。且只能用於元素節點:

       object.setAttribute(attribute,value)

       例如:var shopping=document.getElementById("purchase");       //得到id為purchase的屬性

             shopping.setAttribute("title","a list of goods") //將這個元素的title屬性值設定為a list of goods

       可通過以下程式碼來證明屬性值確實發生了變化:

<script type="text/javascript">
var paras=document.getElementById("purchase");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));
</script>

小結

        介紹DOM的五個方法:

         getElementById

         getElementsByTagName

         getElementsByClassName

         getAttribute

         setAttribute

       該五個方法是將要編寫許多DOM指令碼的基石。