JavaScript Get Element By Attribute

In this tutorial, you will learn how Javascript get element by attribute of the element. You will select elements on basis of their attributes and attribute value.

Generally, we select HTML elements using their id or class name. But, sometimes we need to select elements on basis of their attributes.

For example, we need to select an image element on basis of their src attribute value or select a link element on basis of their href attribute value.

Select Element By Attribute

To select elements on basis of their attributes use the querySelector method of the document object. It uses CSS selectors to select elements.

The element can be selected on basis of its id, class or any other attribute.

For example, if you want to select an element with a title attribute you can use document.querySelector('[title]').

<div title="hello"></div>

<script>
  // select element by title attribute
  var element = document.querySelector('[title]');
  console.log(element);
</script>

Output

Select element by src attribute:

<img src="cat.jpg" alt="cat">

<script>
  // select element by src attribute
  var element = document.querySelector('[src]');
  console.log(element);
</script>

Output

Select Element By Attribute's Value

Previously we selected elements on the basis of attribute name but, now we need to select elements on basis of the attribute value.

For example, we can have many elements in the document with a title attribute but we want to select only that element which is having the title 'hello'.

To select the element on the basis of attribute value use the querySelector method and pass [attribute="value"] to it.

<div title="my div"></div>
<div title="hello"></div>

<script>
// select element by title attribute
var element = document.querySelector('[title="hello"]');
console.log(element);
</script>

Output

Select All Elements By Attribute

In the above examples we have used the querySelector method that only selects the first matching element. But, if we want to select all matching elements then we can use the querySelectorAll method.

It also uses a CSS selector to select the matching elements.

It returns a NodeList object which is an array like object. It contains all matching elements.

<div title="my div"></div>
<div title="hello"></div>

<script>
  // select all elements by title attribute
  var elements = document.querySelectorAll('[title]');
  console.log(elements);
</script>

Output

Look at the output above, you can see the querySelectorAll method selects all the element that has title attribute in the document and return a NodeList object.

Select All Elements By Attribute's Value

Just like above where we selected an element on the basis of the attribute's value we can use the same way here but using the querySelectorAll method.

By using the querySelectorAll method we can select all elements that have the attribute's value as 'hello' in the example below.

<div title="my div"></div>
<div title="hello"></div>
<p title="hello"></p>

<script>
// select element by title attribute
var element = document.querySelectorAll('[title="hello"]');
console.log(element);
</script>

Output

Conclusion

In this short guide, you have learned how javascript get element by attribute and its value. You can use the querySelector method to select the first match of the element on the basis of the attribute and the querySelectorAll method to select all matching elements on the basis of the attribute.