JavaScript | Accessing and Manipulating DOM Elements for Beginners
Javascript provides methods to access and manipulate the Document Object Model (DOM). These methods can be accessed using document the object. There are many methods available and in this post, we’ll be learning different ways of accessing DOM elements. All these methods reside in the document Object which is our HTML document.
Table of Contents
- getElementById() Method
- getElementsByClassName() Method
- getElementsByTagName() Method
- getElementsByName() Method
- querySelector() and querySelectorAll() Method
- Conclusion
getElementById() Method
Through this methods we can access unique element in document through attribute id. In HTML id must be unique to other element id.
It takes a string which is id is an element as an argument and returns that element. If the element does not exist in that case it returns null.
<h2 id="name" >John Kenny</h2>
<script>
name_element = document.getElementById('name');
console.log('Name element : ',name_element);
console.log('Name element HTML Text : ',name_element.innerHTML);
console.log('Name element Text : ',name_element.innerText);
</script>
//Console Output
Name element : <h2 id="name">John Kenny</h2>
Name element HTML Text : John Kenny
Name element Text : John Kenny
Use of Javascript getElementById() method to get the element
The name_element returns element and innerHTML and innerText are the properties of that element. In output innerHTML and innerText returns the same output but they are different properties. On one hand, were innerHTML return text in form of HTML and does not parse HTML content, and on the other side, innerText the property displays HTML as plain text.
getElementsByClassName() Method
This method returns a list of the element which belongs to a given class. It takes a string which is the class name as an argument and returns a list. If no element with a class name is found then an empty HTMLCollection array is returned.
To check if the array has any elements using .length property.
<h3 class="font-bold" >Student Details</h3>
<p>Name : <span class="font-bold" >Sunil</span></p>
<p>Class : <span class="font-bold" >10th C</span></p>
<p>Total Marks Scored <span class="font-bold" >588</span></p>
<script>
font_bold_elements = document.getElementsByClassName('font-bold');
if(font_bold_elements.length){
console.log("Elements ",font_bold_elements);
}else{
console.log("Elemet does not exists ");
}
</script>
//Console Output
Elements HTMLCollection(4) [h3.font-bold, span.font-bold, span.font-bold, span.font-bold]0: h3.font-bold1: span.font-bold2: span.font-bold3: span.font-boldlength: 4__proto__: HTMLCollection
Javascript length property to check whether any element exists in the array
getElementsByTagName() Method
We can obtain an array of elements that belong to a given tag name. It takes a string that is tag name as an argument and returns a list. If no element with a tag name is found then an empty HTMLCollection array is returned.
To check if the array has any elements using.length property.
<h3 class="font-bold" >Student Details</h3>
<p>Name : <span class="font-bold" >Sunil</span></p>
<p>Class : <span class="font-bold" >10th C</span></p>
<p>Total Marks Scored <span class="font-bold" >588</span></p>
<script>
span_elements = document.getElementsByTagName('span');
if(span_elements.length){
console.log("Elements ",span_elements);
}else{
console.log("Elemet does not exists ");
}
</script>
//Console Output
Elements HTMLCollection(3) [span.font-bold, span.font-bold, span.font-bold]
Get an array of HTML Elements by their Tag
getElementsByName() Method
We can obtain elements which belong to the same name the attribute of elements. This method is mostly used on getting form of elements. It takes a string in this case which is name the attribute of element and returns array.
<h3>Student Form</h3>
<form action="">
<p>Name</p>
<input type="text" name="name" value="Kunal">
<p>Class</p>
<input type="text" name="class" value="10th C">
<p>Roll No</p>
<input type="text" name="roll_no" value="10">
</form>
<script>
name_elements = document.getElementsByName('name');
class_elements = document.getElementsByName('class');
roll_no_elements = document.getElementsByName('roll_no');
console.log('Name Elements ',name_elements);
console.log('Class Elements ',class_elements);
console.log('Roll No Elements ',roll_no_elements);
</script>
Get array of elements by name attribute using getElementsByName() Method
querySelector() and querySelectorAll() Method
Suppose there are cases where we need to filter elements on basis of certain attributes for that we need to use these methods. Both querySelector() and querySelectorAll() methods are similar to a minor change which is querySelector() returns single element and querySelectorAll() the method returns an array of elements.
General Usage
To obtain an element by id use the # symbol with an id of the element.
document.querySelector("#element_id");
To obtain element by class use .(dot) character followed by a class of element.
document.querySelector(".element_class");
Let us look at a short example of querySelector() and querySelectorAll() Method.
<div id="parent-div" >
<h2 class="title" >Title 1</h2>
<p class="content" >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<hr>
<h2 class="title" >Title 2</h2>
<p class="content" >t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<hr>
<h2 class="title" >Title 3</h2>
<p class="content" >There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words </p>
<hr>
</div>
<script>
parent_div = document.querySelector('#parent-div');
title_arr = document.querySelectorAll('.title');
console.log("Parent Div : ",parent_div);
console.log("Heading Elements");
for(let element of title_arr){
console.log(element);
}
</script>
Using Javascript querySelector() and querySelectorAll() Method
Conclusion
So it’s time to say bye we have come to the end of our post on JavaScript | Accessing and Manipulating DOM Elements for Beginners. If you like our content then please do share it and comment to clarify your doubts.
Related Posts
- Explained with Examples Javascript Object.values() method for Beginners
- JavaScript Understanding Array Filter Function with Examples for Beginners
