Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Explain various type of HTML DOM methods
We have six different HTML DOM methods that can be used to access or manipulate HTML elements using JavaScript −
HTML DOM getElementById() Method
HTML DOM getElementsByClassName() Method
HTML DOM getElementsByName() Method
HTML DOM getElementsByTagName() Method
HTML DOM querySelector() Method
HTML DOM querySelectorAll() Method
Now, let us discuss the above-mentioned HTML DOM methods with appropriate examples.
HTML DOM getElementById()
The HTML getElementId() method is used to access or manipulate an HTML element using its "id". This method accepts "id" as a parameter and returns the reference to the DOM element with the specified id.
Note − The "id" should be unique, but if there are two or more HTML elements with the same "id", the getElementById() returns the first element.
Syntax
Following is the syntax of HTML DOM getElementById() Method −
document.getElementById(HTMLelementID);
The "HTMLelementID" is the id value of the element. If the element with the specific id does not exist, it returns null.
Example
In the following example, we are trying to get the element with the specified "id" using the HTML DOM getElementById() method.
<html>
<body>
<h2>The getElementsById() Method</h2>
<h4 id="demo1"></h4>
<p id="demo2"></p>
<script>
document.getElementById("demo1").innerHTML = "Tutorialspoint";
document.getElementById("demo2").innerHTML = "Simply Easy Learning at your fingertips";
</script>
</body>
</html>
HTML DOM getElemenstByClassName()
The HTML getElementByClassName() is used to return a collection of HTML elements with a specified class name. The HTML collection is an array of HTML elements where we can access them by using an index value (starts at 0).
Note − We can use the length property to return the number of elements in the collection.
Syntax
Following is the syntax of HTML getElementByClassName() method −
document.getElementsByClassName(classname);
The "classname" is the class name of the HTML elements. We can also search for multiple class names by separating them by spaces (for instance, getElementsByClassName("demo dummy").
Example
In the example below, we are getting all the HTML elements with class = "demo" using the HTML getElementByClassName() method. Then we are changing the text of the third element in the collection.
<!DOCTYPE html>
<html>
<body>
<h2>The getElementsByClassName() Method</h2>
<h4 class="demo">Welcome</h4>
<h4 class="demo">To</h4>
<h4 class="demo">Tutorialspoint</h4>
<h4 class="demo">Family</h4>
<script>
const divs = document.getElementsByClassName("demo");
collection[2].innerHTML = "Tutorix";
</script>
</body>
</html>
HTML DOM getElementsByName()
The HTML getElementsByName() method is used to return a collection of HTML elements (NodeList) with a specified name. This NodeList (array-like collection) can be accessed by index value (starts from 0).
Note − We can use the length property to return the number of nodes in the collection.
Syntax
Following is the syntax of HTML getElementsByName() −
document.getElementsByName(name);
The "name" specifies the value of the HTML element’s name attribute.
Example
In the following example, we are getting the length of all the HTML elements with the name "gender" using the HTML getElementsByName() method.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function totalgenders(){
var genders = document.getElementsByName("gender");
alert("Total Genders: "+genders.length);
}
</script>
<form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">
</form>
Click here to get the total number of genders:
<input type="button" onclick="totalgenders()" value="Click">
</body>
</html>
HTML DOM getElementsByTagName()
The HTML getElementsByTagName() method is used to return a collection of HTML elements with a specified tag name. The HTML collection is an array-like collection of HTML elements where we can access them by using an index value (starts at 0).
Syntax
Following is the syntax of HTML getElementsByTagName() −
document.getElementsByTagName(tagname);
The "tagname" is the tagname of the HTML elemens.
Note − If we pass "*" to this method, it returns all the HTML elements in the document.
Example
Here, we are getting all the HTML elements with the tag name "li" and fetching the second li element in the list −
<!DOCTYPE html>
<html>
<body>
<h2>The getElementsByTagName() Method</h2>
<p>An Ordered list:</p>
<ol>
<li>Apple</li>
<li>Kiwi</li>
<li>Pear</li>
<li>Cherry</li>
</ol>
<p>The second li element is:</p>
<p id="demo"></p>
<script>
const collection = document.getElementsByTagName("li");
document.getElementById("demo").innerHTML = collection[1].innerHTML;
</script>
</body>
</html>
HTML DOM querySelector()
The HTML querySelector() method is used to return the first HTML element that matches a CSS selector.
Syntax
Following is the syntax of HTML querySelector() method −
document.querySelector(CSS selectors);
Example
In the following example, we are getting the first <div> element using the HTML querySelector() method −
<!DOCTYPE html>
<html>
<body>
<h1>The querySelector() Method</h1>
<div>Tutorialspoint</div>
<div>Simply Easy Learning at your fingertips.</div>
<script>
document.querySelector("div").style.backgroundColor = "seagreen";
</script>
</body>
</html>
HTML DOM querySelectorAll()
The HTML querySelectorAll() method will return all HTML elements that match a CSS selector(s).
Syntax
Following is the syntax of HTML querySelectorAll() −
document.querySelectorAll(CSS selectors);
Example
In the example below, we are selecting all the elements with class = "demo" and adding a color to the elements.
<!DOCTYPE html>
<html>
<body>
<h1>The querySelector() Method</h1>
<h2 class = "demo">Tutorialspoint</h2>
<p class = "demo">Simply Easy Learning at your fingertips.</p>
<script>
const allElements = document.querySelectorAll(".demo");
for (let i = 0; i < allElements.length; i++) {
allElements[i].style.color = "seagreen";
}
</script>
</body>
</html>
175 Views
