DOM manipulation is a skill set that every web developer must know about. With DOM manipulation, we can access the DOM and change the content or structure of the DOM and thus, make the web dynamic.
The topic today will focus on selecting the elements in DOM by using getElementByID() and getElementsByTagName(). What is the difference between those two and what is the case for each specific one? Let’s have a look.
Selecting and manipulating the DOM
Template HTML
<body> <p id="p1">this is the line 1</p> <p>this is the line 2</p> <p>this is the line 3</p> <p>this is the line 4</p> <p>this is the line 5</p> </body>
In this post, we will use the HTML snippet above for manipulation.
Using getElementByID()
The name of the method has told you what it’s used for. To get an element in DOM tree by the id of that element. When you writing HTML, ID is something unique and should be assigned for only one element/tag for the whole HTML file. If you accidentally or intentionally assign the same ID to more than one element the DOM will get the first one.
Now, you know that getElementByID() will return a single element that has the ID we pass inside the parentheses.
<script>
var p1 = document.getElementById("p1");
p1.innerHTML = "the text has change"
</script>
As “p1” is the id of the first p tag, the precedent codes change the text of it.
innerHTML will change the text inside the opening tag and closing tag
Using getElementsByTagName()
When we use this method, we will select all the elements that have the same tag name with the one we pass inside the parentheses. Let’s try this code.
var p = document.getElementsByTagName("p")
We declare a variable p and assign to it whatever the method document.getElementsByTagName(“p”) return. In this case, that method will return a whole list of all the elements of p tag. The list is something similar to an array in JavaScript so that we can use for loop to access every single element inside the list and manipulate it.
for (var i = 0; i < p.length; i++) {
p[i].innerHTML = "Text of line " + (i + 1) + "has change"
}
or you can access to a specific element in the list using the index:
p[1].innerHTML = "This text has changed again"
There are so many DOM methods and attributes that help you to manipulate the DOM, not just innerHTML. With DOM manipulation, you can change the append or structure of the DOM, add or remove HTML, change the style of elements.
The most important thing in DOM manipulation is you can set event listener and event handler for the elements so that you can make the button, a form, or any element in the web work the way you want.
We will discuss more about DOM manipulation later
Click to see the source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p id="p1">this is the line 1</p>
<p id="p1">this is the line 2</p>
<p id="p1">this is the line 3</p>
<p>this is the line 4</p>
<p>this is the line 5</p>
<script>
var p1 = document.getElementById("p1");
p1.innerHTML = "the text has change"
var p = document.getElementsByTagName("p")
for (var i = 0; i < p.length; i++) {
p[i].innerHTML = "Text of line " + (i + 1) + " has change"
}
p[1].innerHTML = "This text has changed again"
</script>
</body>
</html>