How many ways we can select HTML tag or HTML DOM elements in javascript

Select HTML DOM elements by tag the name, using the javascript "getElementsByTagName()" method.

We know In CSS we can select HTML DOM element by tag name, in javascript we can also select HTML DOM element by HTML tag name using the "getElementsByTagName()" method. This method will take the tag name as a string and return an HTMLCollection of all the selected tags.
Suppose in our website we have three h3 tags, now if we apply any CSS to the h3 tag it will change all three tags, so just like the CSS, javascript getElementsByTagName() method will give us all three tag as an HTMLCollection which is live in HTML DOM, and from this collection, we can select a single item just like an array.

//HTML
<h3>This is heading 1</h3>
<h3>This is heading 2</h3>
<h3>This is heading 3</h3>

//js
var all_heading = document.getElementsByTagName('h3'); // return all three h3 tags as HTML collection
console.log(all_heading[0].textContent); // output: This is heading 1
console.log(all_heading[1].textContent); // output: This is heading 2
console.log(all_heading[2].textContent); // output: This is heading 3

You can Download Source Code complete source code from here, and its free!.

Select HTML DOM elements by the class name using the javascript "getElementsByClassName()" method.

In CSS To select HTML tags using the class we use dot(.) at the beginning of the class name, but in javascript to select the HTML DOM elements using the class name we do not need to use dot(.) at the beginning of the class name. That means the "getElementsByClassName()" will take only the class name as a string without dot and return an HTMLCollection of HTML element just like the "getElementsByTagName()" method.

//HTML
<h3 class="heading">This is heading 1</h3>
<h3 class="heading">This is heading 2</h3>
<h3 class="heading">This is heading 3</h3>


//js
var all_heading = document.getElementsByClassName('heading'); // return a collection of html DOM elements
console.log(all_heading[0].textContent); // output: This is heading 1
console.log(all_heading[1].textContent); // output: This is heading 2
console.log(all_heading[2].textContent); // output: This is heading 3

You can Download Source Code complete source code from here, and its free!.

Select HTML DOM element by the ID using the javascript “getElementById()” method.

Selecting an HTML element using the ID is the most common and popular way to select a single element in javascript.
We know every ID is unique in a web page, so if you select the HTML DOM element using the ID it will return a single element. To select an HTML DOM element using ID in javascript we need to use the “getElementById()” and this method will take the ID name of your HTML DOM element as a string without a hash.

//Html
<h1 id="main_title">This is main title</h1>

//js:
var main_title_h1_tag  = document.getElementById(main_title);
console.log(main_title_h1_tag .textContent) //output: This is main title

You can Download Source Code complete source code from here, and its free!.

Select HTML DOM elements by the name attribute using the javascript “getElementsByName()” method.

In our input element, we need to use the name attribute so that we can get the value on the server side. Now if you want to select your input element using the name attribute you can use the “getElementsByName()” Methods. This method will take the name of your name attribute and will return a NodeList not a single item.

Note: check carefully the name of the method is “getElements” (plural)not “getElement”(singular) so from the name, we can understand easily that it will select multiple DOM elements.
The “getElementsByName()” will return a NodeList not HTML collection or array, but you can access like array index. However, you can’t use Array Methods, like valueOf(), push(), pop(), or join() on a node list.

//HTML
<form> 
	<input type="email" name="user_email" value="default1@gmail.com"> <br>  <br>
	<input type="email" name="user_email" value="default2@gmail.com"> <br>  <br>
	<input type="password" name="user_pass" value="123456"> <br>  <br>
	<button id="submit_btn">Submit</button>
</form>

//Js
var user_email = document.getElementsByName('user_email');
console.log(user_email[0].value); output: default1@gmail.com
console.log(user_email[1].value); output: default2@gmail.com

You can Download Source Code complete source code from here, and its free!.

Select multiple HTML DOM elements like CSS selecting way by using the javascript “querySelectorAll()” method.

The “querySelectorAll()” method is one of the most popular ways to selecting complex multiple HTML DOM elements. Using this method we can select HTML DOM element exactly the same as CSS. That means the “querySelectorAll()” method can accept the tag name, class name (with dot), id name(with hash), attribute, etc as parameters.

Note: Like the “getElementsByName()” method, this methos also return a NodeList not Array or collection.

Suppose we have a menu with a dropdown now we can select all children or all parents from this menu.

//HTML
	<ul class="menu">
		<li><a href="">Home</a></li>
		<li class="parent">
			<a href="#">About</a>
			
			<ul class="child">
				<li><a href="">About 1</a></li>
				<li><a href="">About 2</a></li>
			</ul>
		</li>
		<li class="parent">
			<a href="#">Service</a>
			<ul class="child">
				<li><a href="">Service 1</a></li>
				<li><a href="">Service 2</a></li>
			</ul>
		</li>
	</ul>

//Js

//select all li which has paret class
var all_parents = document.querySelectorAll('.menu .parent');
console.log(all_parents); // NodeList of li tag
console.log(all_parents[0]); // About li tag
console.log(all_parents[1]); // Service li tag

// select all a tag which is just inside the parent class
var a_of_all_parents = document.querySelectorAll('.menu .parent > a');
console.log(a_of_all_parents); // NoteList of a tag
console.log(a_of_all_parents[0]); // About a tag
console.log(a_of_all_parents[1]); // Service of a tag

// select all a tag inside the parent class 
var all_a_of_parents = document.querySelectorAll('.menu .parent a'); // Node List contain 6 a tags.

You can Download Source Code complete source code from here, and its free!.

Select a single HTML DOM element like CSS selecting way by using the “querySelector()” method.

The “querySelector()” method is same as the “querySelectorAll()” method except the “querySelector()” method select single html DOM element where the “querySelectorAll()” select multiple html DOM element. Note: From multiple elements, it will select the very first HTML element.

var first_parents = document.querySelector('.menu .parent');
console.log(first_parents); // select the About parent because about is the first parent.

You can Download Source Code complete source code from here, and its free!.

When which javaScript Selection we should use?

• 👌 For single DOM selecting use getElementById() method
• 👌 For simple and multiple DOM seleting use getElementByClassName() method
• 👌 For Complex and single DOM seleting use the querySelector() method
• 👌 For Complex and Multiple DOM seleting use the querySelectorAll() method
• 👌 To select by attarbute use querySelector() or querySelectorAll() method