Accessing HTML Tags

Accessing HTML Tags Video

One of the most useful things that JavaScript can do is access HTML tags and change their content. Look at the example in the next tab.

 document.getElementById("myTag").innerHTML = "New Text";

If you were to have an HTML page like the following, the JavaScript above would change the tag with the id "myTag" by using the function "getElementById" which comes from the document object. We are accessing the DOM or the Document Object Model, which is essentially all the tags on the page with their IDs or names.

 <html>
    <body>
        <span id="myTag">This is my favorite text</span>
    </body>
 </html>

Another way to access HTML is by using the document.write function. It looks something like this.

 document.write("I am being written to the HTML page");

But what if there is an error? For example, what if we misspell something or put the script tag in the wrong place?

Initially, we put the script tag in the head tag.

However, when the browser renders the HTML, it is read from top to bottom. So, if the JavaScript is at the top and you try to access an HTML element in the body, it won't be found. Or, if you misspell a function name, an error will occur as well. However, web pages won't show you the error. Browsers do their best to show what they can.

For example, if you were doing the following.

 <html>
    <head>
        <script>
            document.getElementById("myTag").innerHTML = "New Text";
        </script>
    </head>
    <body>
        <span id="myTag">This is my favorite text</span>
    </body>


 </html>

The previous code will cause an error. We can fix this error by doing the following.

 <html>
    <body>
        <span id="myTag">This is my favorite text</span>
    </body>

    <script>
        document.getElementById("myTag").innerHTML = "New Text";
    </script>
 </html>

However, if we mistype something like this:

 <html>
    <body>
        <span id="myTag">This is my favorite text</span>
    </body>

    <script>
        dcument.getElementById("myTag").innerHTML = "New Text";
    </script>
 </html>

We will also get an error.

How do we fix it?

It's in the browser settings. To access those in Chrome, follow these steps.

Click on the three vertical dots in the upper right-hand corner of the web browser.
Navigate to More Tools->Developer Tools
Click on the console tab. The area shows you the error and where it is in your code. Nice!

We can also use another command to write to the console. It's called console.log.

Try this now.

 <html>
    <body>
        <span id="myTag">This is my favorite text</span>
    </body>

    <script>
        console.log("I am in the console!");
    </script>
 </html>

Open your web page. It won't show anything on the page. However, if you go to the console in the Developer Tools again, you will see the console.log message. Console.log is an excellent way to find out what is happening in your JavaScript code.

Next, let's talk about variables in JavaScript.

See the Pen JS - getElementById by Michael Cassens (@retrog4m3r) on CodePen.