To get an element by attribute name in JavaScript, use the querySelector() method. The querySelector() method returns the first element that matches a specified CSS selector(s) in the document. You can use querySelectorAll() method to get all elements that match a specified CSS selector(s) in the document.
Get An Element By Attribute Name In JavaScript
For example, let’s consider the following html:
<html>
<head>
</head>
<body>
<div title="Some Title"> First Div </div>
<div title="Some other Title"> Second Div </div>
</body>
</html>To get the first element with a title attribute, use the following code:
var elements = document.querySelector(‘[title]’);
console.log(elements); //[div]To get all elements with a title attribute, use the following code:
var elements = document.querySelectorAll(‘[title]’);
console.log(elements); [div, div]This will return a list of all elements in the document that have a title attribute.
We can also narrow down the selection by using only div with title attribute name :
var elements = document.querySelectorAll(‘div[title]’);
console.log(elements); //[div, div]The code above will return a list of all div elements in the document that have a title attribute.
Another approach is to get all the elements in the DOM and iterate over them to find the one with the specified attribute name :
var allElements = document.body.getElementsByTagName(‘*’);
var elementsWithTitleAttr = [];
for (var i = 0; i < allElements.length; i++) {
if (allElements.item(i).hasAttribute(‘title’)) {
elementsWithTitleAttr.push(allElements.item(i));
}
}
console.log(elementsWithTitleAttr); //[div, div]The code above will get all the elements in the DOM and iterate over them. It will check if each element has a title attribute. If it does, it will add it to the list.
You can also use the filter method to get all the elements with a title attribute:
var allElements = document.body.getElementsByTagName(‘*’);
var elementsWithTitleAttr = Array.prototype.filter.call(allElements, function(el) {
return el.hasAttribute(‘title’);
});
console.log(elementsWithTitleAttr); //[div, div]The code above will get all the elements in the DOM and use the filter method to return only the elements that have a title attribute.
You can also use the find method to get the first element with a title attribute:
var allElements = document.body.getElementsByTagName(‘*’);
var elementWithTitleAttr = Array.prototype.find.call(allElements, function(el) {
return el.hasAttribute(‘title’);
});
console.log(elementWithTitleAttr); //[div]The code above will get all the elements in the DOM and use the find method to return the first element that has a title attribute.
You can also use the some method to check if there is at least one element with a title attribute:
var allElements = document.body.getElementsByTagName(‘*’);
var hasTitleAttr = Array.prototype.some.call(allElements, function(el) {
return el.hasAttribute(‘title’);
});
console.log(hasTitleAttr); //trueThe code above will get all the elements in the DOM and use the some method to check if there is at least one element with a title attribute.
You can also use the every method to check if all elements have a title attribute:
var allElements = document.body.getElementsByTagName(‘*’);
var allHaveTitleAttr = Array.prototype.every.call(allElements, function(el) {
return el.hasAttribute(‘title’);
});
console.log(allHaveTitleAttr); //falseThe code above will get all the elements in the DOM and use the every method to check if all elements have a title attribute.
You can also use the forEach method to get all the elements with a title attribute:
var allElements = document.body.getElementsByTagName(‘*’);
var elementsWithTitleAttr = [];
Array.prototype.forEach.call(allElements, function(el) {
if (el.hasAttribute(‘title’)) {
elementsWithTitleAttr.push(el);
}
});
console.log(elementsWithTitleAttr); //[div, div]The code above will get all the elements in the DOM and use the forEach method to return only the elements that have a title attribute.
You can also use the map method to get all the elements with a title attribute:
var allElements = document.body.getElementsByTagName(‘*’);
var elementsWithTitleAttr = Array.prototype.map.call(allElements, function(el) {
return el.hasAttribute(‘title’) ? el : null;
}).filter(function(el) {
return el != null;
});
console.log(elementsWithTitleAttr); //[div, div]The code above will get all the elements in the DOM and use the map method to return only the elements that have a title attribute.
You can also use the reduce method to get all the elements with a title attribute:
var allElements = document.body.getElementsByTagName(‘*’);
var elementsWithTitleAttr = Array.prototype.reduce.call(allElements, function(acc, el) {
if (el.hasAttribute(‘title’)) {
acc.push(el);
}
return acc;
}, []);
console.log(elementsWithTitleAttr); //[div, div]The code above will get all the elements in the DOM and use the reduce method to return only the elements that have a title attribute.
You can also use the Array.from method to get all the elements with a title attribute:
var allElements = document.body.getElementsByTagName(‘*’);
var elementsWithTitleAttr = Array.from(allElements).filter(function(el) {
return el.hasAttribute(‘title’);
});
console.log(elementsWithTitleAttr); //[div, div]The code above will get all the elements in the DOM and use the Array.from method to return only the elements that have a title attribute.
Conclusion
There are many ways to get an element by attribute name in Javascript. You can use querySelector, getElementsByTagName, Array.prototype methods like find, some, every, forEach, map and reduce or the Array.from method.
Which one you choose is up to you and your preferences. I hope this article helped you learn how to get element by attribute name in Javascript.
If you have any questions or comments, please feel free to leave them below.