使用 JavaScript 獲取 HTML 元素的屬性

Mehvish Ashiq 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中使用 getAttribute() 獲取 HTML 元素的屬性
  2. 在 JavaScript 中使用 attributes 屬性獲取 HTML 元素的屬性
  3. 在 JavaScript 中使用 jQuery 獲取 HTML 元素的屬性
使用 JavaScript 獲取 HTML 元素的屬性

本教程指導如何使用 JavaScript 和 jQuery 獲取 HTML 元素的屬性。

我們將使用帶有 querySelector()getElementById() 方法的 getAttribute() 函式,以及 attributes 節點列表來獲取屬性名稱及其值。

getAttribute() 方法輸出元素屬性的值;該元素可以通過標籤或 ID 選擇。

我們使用 querySelector 選擇標籤元素;它給出了文件中與選擇器匹配的第一個元素,而 getElementById() 獲取具有指定 id 的第一個元素。

attributes 屬性返回特定 HTML 元素的屬性集合。

在 JavaScript 中使用 getAttribute() 獲取 HTML 元素的屬性

讓我們從 HTML 文件物件模型 (DOM) 的 getAttribute() 函式開始獲取指定 HTML 元素的屬性值。

示例程式碼:

<!DOCTYPE html>
<html>
 	<head>
 		<title>Get Attribues of HTML Element Using JavaScript</title>
 	</head>
 	<body>
 		<span id="getAttr" name="attr" message="get attributes"></span>
 		<p id="testP" name="testing"> This is a paragraph </p>
 		<script>
 			const getElementByID = document.getElementById("getAttr")
 			const getElementByQuery = document.querySelector('p');
 			console.log(getElementByID.getAttribute("name"));
 			console.log(getElementByQuery.getAttribute("id"));
 		</script>
 	</body>
</html>

輸出:

"attr"
"testP"

在 JavaScript 中使用 attributes 屬性獲取 HTML 元素的屬性

在下面的程式碼中,我們使用 attributes 屬性來訪問特定 HTML 元素的屬性名稱和值,並使用 push() 方法將它們插入到兩個單獨的陣列中。

你可以在此處找到有關 push() 函式的更多資訊。看下面的啟動程式碼來練習。

<!DOCTYPE html>
<html>
 	<head>
 		<title>Get Attribues of HTML Element Using JavaScript</title>
 	</head>
 	<body>
 		<span id="getAttr" name="attr" message="get attributes"></span>
 		<script>
 			const getElementByID = document.getElementById("getAttr");
 			attrs = getElementByID.attributes;
 			n = attrs.length;
 			attrNameArray = [];
 			attrValueArray = [];
 			for (var i = 0; i < n; i++){
 				attrNameArray.push(attrs[i].nodeName);
 				attrValueArray.push(attrs[i].nodeValue);
			}
		console.log("Print attribute names and values with loop");
		console.log(attrNameArray);
		console.log(attrValueArray);
 		</script>
 	</body>
</html>

輸出:

"Print attribute names and values with loop"
["id", "name", "message"]
["getAttr", "attr", "get attributes"]

在 JavaScript 中使用 jQuery 獲取 HTML 元素的屬性

以下程式碼使用 jQuery 使用 each() 函式獲取屬性的名稱和值。each() 方法為每個匹配的元素執行一個函式/方法。

示例程式碼:

<!DOCTYPE html>
<html>
 	<head>
 		<title>Get Attribues of HTML Element Using JavaScript</title>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
        </script>
 	</head>
 	<body>
 		<span id="getAttr" name="attr" message="get attributes"></span>
		<script>
 			var element = $("#getAttr");
 			$(element[0].attributes).each(function() {
				console.log(this.nodeName+':'+this.nodeValue);
            });
		</script>
	</body>
</html>

輸出:

"id:getAttr"
"name:attr"
"message:get attributes"
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Attribute