CODE --> JavaScript Published: 2019-02-18
How to get elements by ID, class, and tag name
In Javascript, their plenty of ways to get document objects. Just to name a few, there are:

  • document.getElementById
  • document.getElementsByClassName
  • document.getElementsByTagName


  • When using these you have to put into consideration what you're trying to archive. For example, put this bit of code into consideration:


    <!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>

    <span class="myClass">in here is some text</span>
    <div id="myDiv">in here some more text</div>

    <p>And here is a bunch more text.</p>
    <p>but then I wanted to put some more text inside of here too</p>
    </body>
    </html>


    In that example, they're three different types of methods in which we could use to get those elements, one of each method.

    Getting elements by ID



    For the first method that we are going to use, we are going to use the document.getElementById, which is probably the most common method used to get elements on a page with Javascript. So, say we have this setup here:


    <div id="myDiv">in here some more text</div>


    So all there is now is one div element inside of our body tag. It has an ID of "myDiv". We can now use the JavaScript method document.getElementById to get that element so we can then further do whatever we want with it. So that piece of code would look like.


    //We'll store the element inside of a variable so we can then
    //console.log it to show that we do in fact have that element

    let myDiv = document.getElementById('myDiv');

    //And if we were to console.log(myDiv) we would get
    //<div id="myDiv"></div>



    Getting elements by class name



    Getting elements by class name is sorta similar to getting elements by tag name. The only difference is the selector type really. document.getElementsByClassName gets all of the elements and then puts them inside of an array. Using document.getElementsByClassName is handy for when you have more than one element that you want to get at a time.

    But for this example, we are going to only get one element. Lets setup our scenario up:


    <div class="myClass"></div>


    And in order to get that element, we can use document.getElementsByClassName


    //So once again we'll set the element to a variable.
    //so we can then later console.log it
    let myClass = document.getElementsByClassName('myClass')[0];

    //Notice how we use array selector of 0 to get the very first class


    and if we were to console.log this we would get:


    <div class="myClass"></div>


    Getting elements by tag name



    Like I said earlier, document.getElementsByTagName is simliar to document.getElementsByClassName. It store its finding inside of an array. So say our elements would be like this:


    <p>This is some text here</p>
    <p>And some more here as well


    If we want to get those two elements and display the textContent of them both, we would have to do:


    let myElements = document.getElementsByTagName('p');

    //loop through each tag like this
    for(var i = 0; i < myElements.length; i++) {
    //and then simply console.log the elements
    console.log(myElements[i].textContent;
    }


    And that's it! That is three of Javascript ways of getting elements on the page.
    Nerd+Geek is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.