Tech Junkie Blog: JavaScript : Selecting Elements in The DOM getElementById, getElementByTagName, getElementByClassName, querySelector, and querySelectorAll

Tuesday, April 18, 2017

JavaScript : Selecting Elements in The DOM getElementById, getElementByTagName, getElementByClassName, querySelector, and querySelectorAll

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:

  • 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

Let's say you have the following markup code:

<!DOCTYPE html>
<meta charset="utf-8" />
    <table id="myTable">
        <tr class="row">
                <p>Paragraph 1</p>
        <tr class="row">
                <p>Paragraph 2</p>
        <tr class="row">
                <p>Paragraph 3</p>
        <tr class="row">
                <p>Paragraph 4</p>
        <tr class="row">
                <p>Paragraph 5</p>
    <script src="index.js"></script>

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");

No comments:

Post a Comment