The HTML Document Object Model (DOM) provides us with a series of methods that we can use to find and select HTML elements anywhere in the webpage using JavaScript.
In this lesson, we will learn about those methods. They are as follows:
- getElementById() method
- getElementsByName() method
- getElementsByClassName() method
- getElementsByTagName() method
- querySelector() method
- querySelectorAll() method
The JavaScript getElementById() method 😉
The getElementById() method in JavaScript helps us to find and select a specific HTML element that has the given id.
It returns the selected element as an object allowing us to utilize that element’s attributes and properties.
Note: In HTML, an id attribute is unique for each element. That means, we cannot have two or more elements having the same id.
Syntax
document.getElementById(id)
Parameters
- id : It is required. It must contain the id of the HTML element that we are finding and selecting.
Returns
- If the element having that id exists then, returns the selected element as an Object.
- Else, returns null.
Example
<!DOCTYPE html>
<html>
<head>
<title>Get Element By Id</title>
</head>
<body>
<a href="https://bitslord.com/" id="bitslord-link"
>Click to go to Bitslord.</a
>
<script>
// Displaying the element having id "bitslord-link".
console.log(document.getElementById("bitslord-link"));
const bitslordLink = document.getElementById("bitslord-link");
// Extracting the element's "href" attribute.
console.log(`The link to redirect to is: ${bitslordLink.href}`);
// Extracting the element's content.
console.log(`Content is: ${bitslordLink.innerHTML}`);
</script>
</body>
</html>
Output

The JavaScript getElementsByName() method 😏
The getElementsByName() method in JavaScript helps us to find and select HTML elements having the given name. In other words, it finds the elements according the value of their name attribute.
It returns an array of elements which is also called NodeList[].
Syntax
document.getElementsByName(name)
Parameters
- name : It is required. It must contain the value of name attribute of the HTML elements that we are finding and selecting.
Returns
- If the elements having that name exists then, returns the a NodeList[] array containing those elements.
- Else, returns an empty NodeList array.
Example
<!DOCTYPE html>
<html>
<head>
<title>Get Elements By Name</title>
</head>
<body>
<p name="studentName">Ada Lovelace</p>
<input name="studentName" type="text" value="Charles Babbage" />
<script>
// Displays a "NodeList[]" array containing all the elements having their "name" attribute's value of "studentName".
console.log(document.getElementsByName("studentName"));
// To Get the second element having name of "studentName".
let inputElement = document.getElementsByName("studentName")[1];
// Extracting the "value" property of input element.
console.log(inputElement.value);
// To check all the available properties that an element has, just open the "NodeList[]" array that we displayed at the very first line.
</script>
</body>
</html>
Output

The JavaScript getElementsByClassName() method 😇
The getElementsByClassName() method in JavaScript helps us to find and select HTML elements having the given class name. In other words, it finds the elements according the value of their class attribute.
It returns an array of elements called HTMLCollection[].
Note: The getElementsByClassName() method is generally more used when we are manipulating CSS inside the HTML.
Syntax
document.getElementsByClassName(class)
Parameters
- class : It is required. It must contain the value of class attribute of the HTML elements that we are finding and selecting.
Returns
- If the elements having that class exists then, returns an HTMLCollection[] array containing those elements.
- Else, returns an empty HTMLCollection array.
Example
<!DOCTYPE html>
<html>
<head>
<title>Get Elements By Class Name</title>
<style>
.heading {
font-family: monospace;
text-align: center;
}
.dogs {
color: brown;
border: 1px solid gray;
}
</style>
</head>
<body>
<h2 class="heading">About Dogs</h2>
<p class="dogs">Golden Retriever</p>
<p class="dogs">Pug</p>
<p class="dogs">German Shepherd</p>
<script>
// Displays an "HTMLCollection[]" array containing all the elements having a "class" of "dogs".
console.log(document.getElementsByClassName("dogs"));
const dogsList = document.getElementsByClassName("dogs");
// Changing the color of "Pug" to "green".
dogsList[1].style.color = "green";
// To check all the available properties that an element has, just open the "HTMLCollection[]" array that we displayed at the very first line.
</script>
</body>
</html>
Output

The JavaScript getElementsByTagName() method 😋
The getElementsByTagName() method in JavaScript helps us to find and select HTML elements having the given tag name. In other words, it finds the elements according to it’s HTML Tag.
It returns an array of elements called HTMLCollection[].
Syntax
document.getElementsByTagName(tagname)
Parameters
- tagname : It is required. It must contain the value of tag name of the HTML elements that we are finding and selecting.
Returns
- If the elements having that tag exists then, returns an HTMLCollection[] array containing those elements.
- Else, returns an empty HTMLCollection array.
Example
<!DOCTYPE html>
<html>
<head>
<title>Get Elements By Tag Name</title>
</head>
<body>
<h2>Students</h2>
<ol>
<li>Ada Lovelace</li>
<li>Charles Babbage</li>
<li>Alan Turing</li>
</ol>
<h2>Programming Languages</h2>
<ul>
<li>C</li>
<li>C++</li>
<li>Javascript</li>
<li>Python</li>
<li>Java</li>
</ul>
<p id="note"></p>
<script>
// Displays an "HTMLCollection[]" array containing all the elements having a "tag" of "li".
console.log(document.getElementsByTagName("li"));
const allLists = document.getElementsByTagName("li");
console.log(`${allLists[0].innerHTML} is regarded as the first female programmer.`);
console.log(`I Love ${allLists[5].innerHTML}.`);
// Changing the content of "p" element with id of "note".
document.getElementById("note").innerHTML = `${allLists[2].innerHTML} is one of the greatest minds ever in Computer Science.`;
// To check all the available properties that an element has, just open the "HTMLCollection[]" array that we displayed at the very first line.
</script>
</body>
</html>
Output

The JavaScript querySelector() method 😎
The querySelector() method in JavaScript helps us to find and select the first HTML element having the given CSS Selector. In other words, it finds the first element according to it’s CSS Selector.
Note: CSS Selectors are special names that we can use to style HTML Elements. Some of the frequently used selectors are: Tag name, .Class, #ID, etc.
It returns the selected element as an object allowing us to utilize that element’s attributes and properties.
Syntax
document.querySelector(cssSelector)
Parameters
- cssSelector : It is required. It must contain the CSS Selector of the HTML element that we are finding and selecting.
Returns
- If the element having that CSS Selector exists then, returns the selected element as an Object.
- Else, returns null.
Example: Selecting through Tag Name 🤗
<!DOCTYPE html>
<html>
<head>
<title>Query Selector</title>
</head>
<body>
<h2>Javascript</h2>
<p class="description">Javascript is a high level programming language.</p>
<p class="description">It was created by Brendan Eich.</p>
<h2>Python</h2>
<script>
// Finding elements by CSS Tag Selector.
const h2Element = document.querySelector("h2");
// This will display the first element having "h2" tag. i.e. Heading having the content "Javascript" will be selected.
// The second heading having the content "Other Programming Languages" will not be selected.
console.log(h2Element);
</script>
</body>
</html>
Output

Example: Selecting through Class Name 😉
<!DOCTYPE html>
<html>
<head>
<title>Query Selector</title>
<style>
.description {
color: yellowgreen;
}
</style>
</head>
<body>
<h2>Javascript</h2>
<p class="description">Javascript is a high level programming language.</p>
<p class="description">It was created by Brendan Eich.</p>
<script>
// Finding elements by CSS Class Selector i.e. '.description'.
const firstDescription = document.querySelector(".description");
// Only the first element found will be selected.
console.log(firstDescription);
</script>
</body>
</html>
Output

Example: Selecting through ID 🙂
<!DOCTYPE html>
<html>
<head>
<title>Query Selector</title>
<style>
#creator {
color: tomato;
text-decoration: underline;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Javascript</h2>
<p>Created by: <span id="creator">Brendan Eich</span>.</p>
<h2>Python</h2>
<p>Created by: <span id="creator">Guido van Rossum</span>.</p>
<script>
// Finding elements by CSS ID Selector i.e. '#creator'.
const jsCreator = document.querySelector("#creator");
// Only the first element found will be selected.
console.log(jsCreator);
</script>
</body>
</html>
Output

The JavaScript querySelectorAll() method 😁
The querySelectorAll() method in JavaScript helps us to find and select all the HTML elements having the given CSS Selector.
It returns an array of elements called NodeList[].
Syntax
document.querySelectorAll(cssSelector)
Parameters
- cssSelector : It is required. It must contain the CSS Selector of the HTML elements that we are finding and selecting.
Returns
- If the elements having that CSS Selector exists then, returns the a NodeList[] array containing those elements.
- Else, returns an empty NodeList array.
Example: Selecting through Tag Name 🤗
<!DOCTYPE html>
<html>
<head>
<title>Query Selector All</title>
</head>
<body>
<h2>Javascript</h2>
<p>Created By: Brendan Eich.</p>
<h2>Python</h2>
<p>Created By: Guido Van Rossum.</p>
<script>
// Finding all the elements having CSS Tag Selector: 'h2'.
const h2Elements = document.querySelectorAll("h2");
// Displays a "NodeList[]" array having all the "h2" tag elements.
console.log(h2Elements);
</script>
</body>
</html>
Output

Example: Selecting through Class Name 😉
<!DOCTYPE html>
<html>
<head>
<title>Query Selector All</title>
<style>
.description {
color: blue;
}
</style>
</head>
<body>
<h2>Javascript</h2>
<p class="description">Created By: Brendan Eich.</p>
<h2>Python</h2>
<p class="description">Created By: Guido Van Rossum.</p>
<script>
// Finding all the elements having CSS Class Selector: '.description'.
const descriptions = document.querySelectorAll(".description");
// Displays a "NodeList[]" array having all the elements having "description" as class.
console.log(descriptions);
</script>
</body>
</html>
Output

Example: Selecting through ID 🙂
<!DOCTYPE html>
<html>
<head>
<title>Query Selector All</title>
<style>
#creator {
color: tomato;
text-decoration: underline;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Javascript</h2>
<p>Created By: <span id="creator">Brendan Eich</span>.</p>
<h2>Python</h2>
<p>Created By: <span id="creator">Guido Van Rossum</span>.</p>
<script>
// Finding all the elements having CSS ID Selector: '#creator'.
const creators = document.querySelectorAll("#creator");
// Displays a "NodeList[]" array having all the elements having "creator" as ID.
console.log(creators);
</script>
</body>
</html>
Output

In this way, we can find and select any HTML Element we want in the given webpage. These methods are almost always used frequently because we want to be able to interact with certain elements in our webpage.