【JavaScript】DOM（二）獲取元素+設定屬性的六種方法

阿新 • • 發佈：2019-01-17

前言

上篇部落格講了DOM的基本組成，也介紹了節點的概念，這一篇部落格，就帶大家瞭解DOM常用的6種方法。一起來看看吧~

獲取元素

有3種DOM方法可以獲取元素節點，分別是通過元素ID，通過標籤名字和通過類名字。

1.getElementById

這個方法將返回一個與給定id屬性值的元素節點對應的物件，是物件哦。大家需要注意的是JavaScript語言是區分字母大小寫的，所以在拼寫“getElementById”的時候，千千萬萬不要把大小寫寫錯。

此方法是document物件特有的函式。在指令碼程式碼裡，函式名後面必須要有一對圓括號，用來包含函式的引數。而getElementById方法的引數只有一個，那就是你想獲得的那個元素的

id屬性的值，id的值必須放在單引號或雙引號裡。

來一句例子程式碼： document.getElementById("purchases").這個呼叫將返回一個物件，這個物件對應著document物件裡一個獨一無二的元素，那個元素的html id屬性值是purchases，我們可以用前面提到過的操作符 typeof來驗證一下，它的資料型別。

下面是把一些JavaScript程式碼插入上篇部落格“購物清單”文件之後的程式碼，新增的程式碼進行了加粗，在</body>結束之前。在這裡要PS說一句，我們不太贊成把JavaScript的程式碼直接就嵌入文件裡，但是這是一種比較簡單快捷的測試手段，所以大家要理解下。下面看程式碼

	<!DOCTYPE html>
	<html  lang="en">
		<head>
			<meta charset="utf-8" />
			<title>Shopping list</title>
			 <link rel="stylesheet" href ="DOM.css" media="screen" />
		</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>
				alert(typeof document.getElementById("purchases"));
			</script>
		</body>
	<html>

動手實踐上面的程式碼，記得儲存為html檔案的格式，然後再瀏覽器裡執行，你會看到如圖的一個alert彈框，它告訴你 document.getElementById("purchases")的型別是Object物件。

事實上，文件中每一個元素都是一個物件。利用DOM提供的方法可以得到任何一個物件，一般來說，用不著為文件裡的每一個元素都定義一個獨一無二的id值，DOM提供了另一個方法來獲取那些沒有id屬性的物件。

2.getElementsByTagName

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

下面是個簡單的例子：document.getElementsByTagName("li")

但是當你總是重複敲上面的程式碼的時候，你會覺得長長的字串一點也不利於閱讀還費事。有一個簡單的辦法可以減少不必要的程式碼量，並且可以改善程式碼的可讀性，你想到是什麼了嗎。把document.getElementsByTagName("li")賦值給一個變數就可以啦。

下面的程式碼替換掉上面程式碼中<script>標籤間的程式碼，試試看

	var items=document.getElementsByTagName("li");
	for(var i=0;i<items.length;i++){
		alert(typeof items[i]);
	}

顯示出來的結果就是三個 alert對話方塊，彈出的訊息都是“object”

PS：getElementsByTagName允許把一個萬用字元作為它的引數。

3.getElementsByClassName

從方法的名字裡，你也許嗅到了什麼線索吧，這個方法能夠讓我們通過class屬性中的類名來訪問元素。和上面的getElementsByTagName老兄類似，這個方法也只接受一個引數，就是類名。返回值呢，就是具有相同類名的元素的陣列。看看下面的例子：

 document.getElementsByClassName("sale")

使用這個方法還可以查詢那些帶有多個類名的元素，想要指定多個類名，只要在字串引數中用空格分隔類名即可。我們在<script>標籤中加入下面的程式碼：

 alert（document.getElementsByClassName("important sale").length）;

顯示效果就是警告框裡顯示1，表示只有一個元素匹配，因為只有一個元素同時帶有“important”和“sale”類名。另外，你在引數所寫的類名的順序和類名順序不一致也照樣可以匹配，而且更厲害的是就算元素還帶有更多的類名也沒有關係，照樣可以匹配該元素。

和上面的getElementsByTagName一樣，也可以組合使用getElementsByClassName和getElementById。假如你想知道在 id 為“purchase”的元素中，有多少類名包含“sale”的列表項，可以先找到那個特定的物件，然後再呼叫getElementsByClassName。看看下面的栗子：

 var shopping=document.getElementById("purchase");
 var sales=shopping.getElementsByClassName("sale");

獲取和設定屬性

上面，我們介紹了3種獲取特定元素的方法，我們在得到元素之後，還可以設法獲取它的各個屬性，getAttribute方法就是幹這個的，另外setAttribute方法可以更改屬性節點的值，removeAttribute方法可以移除HTML屬性。

1.getAttribute

這個函式，它也只有一個引數——你打算查詢的屬性的名字。但與之前的那些方法不同，getAttribute方法不屬於document物件，所以我們不能通過document物件來呼叫。它只能通過元素節點物件呼叫。比如，你就可以和getElementsByTagName方法合用，獲取每個<p>元素的title屬性，如下：

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

把上面的程式碼放到上面給出的“購物清單”檔案的末尾，在瀏覽器裡重新載入，螢幕會彈出帶有 a gentle reminder 的alert對話方塊。

假如文件裡有很多個<p>元素，並且它們沒有title屬性，那麼getAttribute("title")方法會返回null值。我們也可以稍微修改一下，讓它只在title屬性有值的時候才彈出訊息。那就增加一條if語句來檢查getAttribute返回值是不是null，同時我們可以增加幾個變數來提高指令碼的可讀性。

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

我們其實還可以把程式碼濃縮的更短一些，if(something)和if(something!=null)完全等價，if(title_text)和if(title_text !=null)也等價。我們還可以把alert語句和if語句寫在同一行上，這可以讓它們更接近於我們日常生活中的英語句子。

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

2.setAttribute

之前我們介紹的方法都是用來獲取資訊的，setAttribute()就有所不同了，它允許我們對屬性節點的值直接做出修改。它也用於元素節點。

下面的栗子，第一條語句得到id是purchase的元素，第二條語句把這個元素的title屬性值設定為 a list of goods。

	var shopping =document.getElementsById("purchase");
	shopping.setAttribute("title","a list of goods");

你想要驗證是否真的修改了屬性，可以再使用 getAttribute方法。

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

瀏覽器上載入之後，將彈出兩個alert對話方塊，第一個出現在setAttribute呼叫之前，它顯示 null 或者空白。第二個對話方塊，出現在設定setAttribute之後，它顯示了"a list of goods"。

你有沒有發現，上面的例子中，我們設定了一個節點的title屬性，這個屬性原先是並不存在的。這表示了，setAttribute實際上完成了兩件事：先建立了這個屬性，然後設定了它的值。如果setAttribute用在本身就有這個屬性的元素節點上，這個屬性值就會被覆蓋掉。

PS：這裡有一個細節需要我們關注，通過setAttribute對文件做出修改後，在通過瀏覽器的view source 選項去檢視文件本身的原始碼的時候，我們看到的仍將是改變前的屬性值，也就是說setAttribute做出的修改不會反映在文件本身的原始碼裡。這種“表裡不一”的現象源於DOM的工作模式：先載入文件的靜態內容，再動態重新整理，動態重新整理不影響文件的靜態內容。這正是DOM的真正威力：對頁面的內容進行重新整理卻不需要在瀏覽器裡重新整理頁面。

3.removeAttribute

removeAttribute()可以幫你移除html中的屬性。看一個簡單的例子：

	document.getElementById('box').removeAttribute('style');

小結

本篇部落格帶大家認識了3種獲取元素的方法，和3種獲取和設定屬性的方法，希望可以給讀者帶來一些收穫。以後關於JavaScript的部落格會不定期的更新，下次見啦~

【JavaScript】DOM（二）獲取元素+設定屬性的六種方法

前言

獲取元素

1.getElementById

2.getElementsByTagName

3.getElementsByClassName

獲取和設定屬性

1.getAttribute

2.setAttribute

3.removeAttribute

小結

【JavaScript】DOM（二）獲取元素+設定屬性的六種方法

Android View體系（二）實現View滑動的六種方法

【dsPIC33E】Bootloader（二）Microchip的Hex檔案結構介紹

【筆記】儲存器（二）

【轉載】Azkaban（二）CentOS7.5安裝Azkaban

【原始碼】RingBuffer（二）——消費者

執行緒管理（二）獲取和設定執行緒資訊

Java 多執行緒學習筆記（二）停止執行緒的幾種方法

【javascript】DOM操作方法（1）——節點屬性

【算法】排序（二）冒泡排序

【NOJ1083】【演算法實驗四】【DP_動態規劃】花生米（二）

劍指Offer行榜【牛客網】練習（二）

從零開始學 Web 之 DOM（二）對樣式的操作，獲取元素的方式

【Servicemesh系列】【Envoy原始碼解析（二）】一個Http請求到響應的全鏈路（一）

【Java總結】——集合（二）之Collection 介面

【機器學習】TensorFlow （二）優化器Optimizer

通俗地說邏輯迴歸【Logistic regression】演算法（二）sklearn邏輯迴歸實戰

javascript學習筆記（二）：定義函數、調用函數、參數、返回值、局部和全局變量

javascript運動框架（二）

【java】簡介（一）

【JavaScript】DOM（二）獲取元素+設定屬性的六種方法

前言

獲取元素

1.getElementById

2.getElementsByTagName

3.getElementsByClassName

獲取和設定屬性

1.getAttribute

2.setAttribute

3.removeAttribute

小結

相關推薦