Searching HTML DOM Elements
In JavaScript we can get any DOM elements of the HTML page by searching the elements DOM using the some inbuilt methods. JavaScript provides the several methods like getElementById(), getElementsByClassName().
document.getElementById()
It is the fastest way to get the specific elements from the elements of the DOM.
Syntax:
var element = document.getElementById("element-id");
It has the element id as the string argument.
It will return the single HTML DOM element (node) if it found with the certain ID, otherwise it will return the null.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Searching elements</title>
<meta charset="utf-8" />
</head>
<body>
<span id="lblHelloWorld">Hello World</span>
<script>
var element = document.getElementById("lblHelloWorld");
element.innerText = "Element was found using the getElementById.";
</script>
</body>
</html>
document.getElementById (Click here to see Live Demo)
In above example, First we find the element using the element’s ID and after that we change the text of the element using the innerText property. So the element text will be change from “Hello World” to the “Element was found using the getElementById.”
document.getElementById() method will found the element using the it’s ID attribute.
As per the HTML markup constraints there must be the only one element with the certain id value. But we can use the same id value for the multiple HTML elements.
But the document.getElementById() will does not work as excepted when there is the multiple HTML elements with the same id value. It will return the first HTML element which it found, So here the another elements will be missed.
Multiple HTML elements with the same ID.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Searching elements</title>
<meta charset="utf-8" />
</head>
<body>
<span id="lblSpanTag">First Span Tag</span><br/>
<span id="lblSpanTag">Second Span Tag</span><br />
<span id="lblSpanTag">Third Span Tag</span><br />
<script>
var element = document.getElementById("lblSpanTag");
element.innerText = "I am the first SPAN tag....";
</script>
</body>
</html>
document.getElementById (Click here to see Live Demo)
If you think that the document.getElementById() will found all three elements with the id “lblSpanTag” and return it, than you are wrong.
As you seen in the above output, document.getElementById() method will return the only one element that is the first element with the matched id even there is the multiple HTML elements are exist with the same id.
document.getElementsByClassName
document.getElementsByClassName() method will return all the elements that match the certain class name.
It will return the list of the HTML DOM elements if it found the any elements with the certain class name, otherwise it will return the empty list.
document.getElementsByClassName() method is not supported in the less than IE9 browser.
Syntax:
var elementsList = document.getElementsByClassName("class-name");
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Searching elements</title>
<meta charset="utf-8" />
</head>
<body>
<span class="spanTag">First Span Tag</span><br />
<span class="spanTag">Second Span Tag</span><br />
<span class="spanTag">Third Span Tag</span><br />
<script>
var elementsList = document.getElementsByClassName("spanTag");
for (var i = 0; i < elementsList.length; i++) {
var node = elementsList[i];
alert(node.innerHTML);
}
</script>
</body>
</html>
document.getElementsByClassName (Click here to see Live Demo)
In above example, First we find the element using the getElementsByClassName() method, which returns the list of the elements of the certain class name by matching the class name with element’s class name attribute.
After that we alert the text of the that three elements.
document.getElementsByTagName
We can also directly found the element using the it’s tag name.
getElementsByTagName() method will return the list of the elements of the certain tag name, otherwise it will return the empty list.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Searching elements</title>
<meta charset="utf-8" />
</head>
<body>
<span class="spanTag">First Span Tag</span><br />
<span class="spanTag">Second Span Tag</span><br />
<span class="spanTag">Third Span Tag</span><br />
<script>
var elementsList = document.getElementsByTagName("span");
for (var i = 0; i < elementsList.length; i++) {
var node = elementsList[i];
alert(node.innerHTML);
}
</script>
</body>
</html>
document.getElementsByTagName() method will find the element by matching element’s tag name.
document.getElementsByName
document.getElementsByName() method will find the element using the element’s name.
It will return the list of the elements of the certain element’s name.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Searching elements</title>
<meta charset="utf-8" />
</head>
<body>
<span name="sAnimals">Dog</span><br />
<span name="sAnimals">Cat</span><br />
<span name="sAnimals">Cow</span><br />
<script>
var elementsList = document.getElementsByName("sAnimals");
for (var i = 0; i < elementsList.length; i++) {
var node = elementsList[i];
alert(node.innerHTML);
}
</script>
</body>
</html>
document.getElementsByName (Click here to see Live Demo)
document.getElementsByName() method will find the element using the element’s name attribute.
document.querySelector / document.querySelectorAll
document.querySelector() and document.querySelectorAll() methods will allow to select elements by using CSS3 query.
The document.querySelector() method will returns only the first element, where as the document.querySelectorAll() method will returns the all elements that match the certain CSS query.
They works in the all modern browsers including the IE8+. But there is the some limitation in the IE8.
<!DOCTYPE html>
<html>
<head>
<title>Searching elements</title>
<meta charset="utf-8" />
</head>
<body>
<ul>
<li>Dog</li>
<li>Cow</li>
<li>Cat</li>
</ul>
<ul>
<li>Monkey</li>
<li>Jellyfish</li>
<li>Dinosaur</li>
</ul>
<script>
var elementsList = document.querySelectorAll("UL > LI:last-child");
for (var i = 0; i < elementsList.length; i++) {
var node = elementsList[i];
alert(node.innerHTML);
}
</script>
</body>
</html>
document.querySelectorAll (Click here to see Live Demo)
Limit search by parent element
We can also search the element within the some area of the HTML document.
It means we can search the element inside the another element or inside the any another DOM.
DOM support the following methods to find the elements into the it self.
- node.getElementsByClassName
- node.getElementsByTagName
<!DOCTYPE html>
<html>
<head>
<title>Searching elements</title>
<meta charset="utf-8" />
</head>
<body>
<ul id="color">
<li class="white">White</li>
<li class="black">Black</li>
<li class="gold">Gold</li>
<li class="gold">Rose Gold</li>
</ul>
<script>
var element = document.getElementById("color");
var goldNodes = element.getElementsByClassName("gold");
for (var i = 0; i < goldNodes.length; i++) {
var node = goldNodes[i];
alert(node.innerHTML);
}
</script>
</body>
</html>
Click here for the live demo Limit Search To The Parent Element
In above example, First I find the element using the getElementById() method, which returns the DOM. After that on that DOM I used the getElementsByClassName() method which will returns the list of the elements of the certain class name.
So in above example, the searching area for the getElementsByClassName() method will be reduced from the whole HTML document to the “color” ID DOM element.