javascript學習筆記（第三章DOM--獲取元素屬性值）

阿新 • • 發佈：2018-12-14

javascript學習筆記（第三章DOM–獲取元素屬性值）

在上一節中我們大致總結了獲取元素的三種方法，分別為：getElementById,getElementsByTagName,getElementsByClass,其中getElementById獲取的是一個特定的元素，getElementsByTagName和getElementsByClass獲取的是一系列特定物件組成的陣列。這一點我們要特別注意，在我們得到想要獲取的元素後我們該如何獲取元素的屬性呢？今天我們來介紹一下javascript中元素屬性的獲取方法。一、getAttribute函式利用此函式我們可以獲取特定元素的屬性，它只有一個引數，就是我們想要查詢的屬性的名字。通常呼叫格式為：

object.getAttribute(attribute)

這裡我們說明一下，getAttribute方法不屬於document物件，所以我們不能再像獲取元素那樣來呼叫此方法，只能用元素節點物件呼叫。例：

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

執行結果如下圖：在這裡插入圖片描述這裡我們要注意一個問題，就是我們所要獲取的元素屬性值是否為空，如果為空，那麼將返回null，所以，為了提高指令碼的可讀性，我們在獲取屬性值時要考慮這個問題，我們可以用if語句來進行判斷，例：

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

二、setAttribute函式上面的getAttribute函式用來獲取元素屬性，而setAttribute函式用來修改元素屬性，它和getAttribute函式一樣也不屬於document物件，只能通過元素節點來呼叫。例：


object.setAttribute(attribute,value)

例：

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

執行結果如下圖：在這裡插入圖片描述完整程式碼：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Shopping list</title>
  </head>
  <body>
    <h1>What to buy</h1>
    <p title="a gentle reminder">Don't forget to buy this stuff.</p>
    <ul id="purchases">
      <li>A tin of beans</li>
      <li class="sale">Cheese</li>
      <li class="sale important">Milk</li>
    </ul>
    <script>
    	var element=document.getElementById("purchases");
    	alert(element.getAttribute("title"));
    	element.setAttribute("title","a list of goods");
    	alert(element.getAttribute("title"));
    </script>
  </body>
</html>

通過完整程式碼我們知道id為purchases的title屬性值本來是空的，我們呼叫setAttribute(“title”,“a list of goods”)函式後，其屬性值發生了改變。通過上面的例子我們發現，setAttribute這個函式同時完成了屬性title的宣告和賦值，元素purchases本身是沒有這個屬性的，那麼對於本身有屬性存在的元素執行了setAttribute後會如何呢？我們可以看一個例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Shopping list</title>
  </head>
  <body>
    <h1>What to buy</h1>
    <p title="a gentle reminder">Don't forget to buy this stuff.</p>
    <ul id="purchases">
      <li>A tin of beans</li>
      <li class="sale">Cheese</li>
      <li class="sale important">Milk</li>
    </ul>
    <script>
    	var element=document.getElementsByTagName("p");
    	for(var i=0;i<element.length;i++)
    	{
    		var title_text=element[i].getAttribute("title");
    		if(title_text)
    		{
    			alert(element[i].getAttribute("title"));
    			element[i].setAttribute("title","a list of goods");
    	        alert(element[i].getAttribute("title"));
    		}

    	}
    </script>
  </body>
</html>

javascript學習筆記（第三章DOM--獲取元素屬性值）