How to Get Attributes of HTML Element Using JavaScript
-
Using
getAttribute()to Get Attributes of HTML Element in JavaScript -
Using the
attributesProperty to Get Attributes of HTML Element in JavaScript - Using jQuery to Get Attributes of HTML Element in JavaScript
This tutorial instructs how to get HTML elements’ attributes using JavaScript and jQuery.
We’ll be using getAttribute() function with querySelector() & getElementById() methods, and attributes node list to get the attribute name & its value.
The getAttribute() method outputs the value of the element’s attribute; the element can be selected by tag or id.
We use querySelector to select a tag element; it gives the first element in a document that matches the selector, whereas getElementById() gets the first element with the specified id.
The attributes property returns a collection of attributes of a particular HTML element.
Using getAttribute() to Get Attributes of HTML Element in JavaScript
Let’s start with the getAttribute() function of HTML Document Object Model (DOM) to get the attribute’s value of a specified HTML element.
Example Code:
<!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>
Output:
"attr"
"testP"
Using the attributes Property to Get Attributes of HTML Element in JavaScript
In the following code, we use the attributes property to access the attribute’s name and value of a particular HTML element and insert them into two separate arrays using the push() method.
You can find more about push() function here. See the following startup code to practice.
<!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>
Output:
"Print attribute names and values with loop"
["id", "name", "message"]
["getAttr", "attr", "get attributes"]
Using jQuery to Get Attributes of HTML Element in JavaScript
The following code uses jQuery to get the attribute’s name and value using the each() function. The each() method runs a function/method for every matched element.
Example Code:
<!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>
Output:
"id:getAttr"
"name:attr"
"message:get attributes"
