Friday, December 3, 2021
In JavaScript the DOM is an acronym for "Document Object Model" that's quite a mouthful. Most people just refer to it as the DOM. The DOM is basically a collection of objects/elements organized in the tree structure. To perform any functions in JavaScript you first have to find a reference to the object or element you are working with. Luckily, there are a few handy JavaScript methods that can help you find the elements in the DOM that you want.
Let's take a look at the methods:
Let's take a look at the methods:
- getElementById - this method gets the element based on the unique id that is assigned to the element
- getElementByClassName - this method gets the elements that has the class name that is passed into the method
- getElementByTagName - this method gets the elements that matches the tag name
- querySelector - this method gets the first child element that matches the CSS selector being passed in
- querySelectorAll - this method gets all the child elements that match the CSS selector
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<table id="myTable">
<tr class="row">
<td>
<p>Paragraph 1</p>
</td>
</tr>
<tr class="row">
<td>
<p>Paragraph 2</p>
</td>
</tr>
<tr class="row">
<td>
<p>Paragraph 3</p>
</td>
</tr>
<tr class="row">
<td>
<p>Paragraph 4</p>
</td>
</tr>
<tr class="row">
<td>
<p>Paragraph 5</p>
</td>
</tr>
</table>
<script src="index.js"></script>
</body>
</html>
How would you select all the paragraph elements? You would use the getElementByTagName to get all the paragraph tags.
var paragraphs = document.getElementsByTagName("p");
Here is how it looks like on the console.
One of the most used method to select an element before jQuery came along was the getElementById method. This was during the time with grandpa used to walk ten miles in the snow to go to school.
Here is how grandpa used to write them!
var tableElem = document.getElementById("myTable");
As you can see grandpa was able to get the table element with the getElementById by passing in the unique "myTable" id that's assigned to the table.
Now we are going to look how we can use the getElementByClassName method to all the elements with the class "row".
As you can see we got all the rows in the table. Generally speaking we don't want to depend on the class name to perform operations on a different type of element such as table row. Let's say we have four rows with the class "row" but the fifth row has the class "special-row" if we only look for the class "row" with our search then we would be missing the fifth row. So in this case the method getElementByTagName is more suitable.
If you've used jQuery before the next two methods should be very familiar to you. The querySelectAll is the catch all method that will find anything that you pass in by searching through the whole entire DOM. For instance you can find all the <p> elements by typing in
var paragraphs = document.querySelectorAll("p");
To select classes all you have to do is prefix the class name with a . remember you can pass any CSS selector as the method parameter.
var rows = document.querySelectorAll(".row");
Like the querySelectorAll method the querySelector method also take a CSS selector. However, it stops search for elements when it hits the first element that matches the CSS selector. For instance if you look for the same "row" class with the querySelector instead of the querySelectorAll method you will only get back one element
var row = document.querySelector(".row");
The most common usage for the querySelector is to get an element by id like the following code
var element = document.querySelector("#myTable");
Subscribe to:
Post Comments (Atom)
thanku so much this information
ReplyDeleteamazetechnology
Good post thanks for shre article.
ReplyDelete