Friday , 17 November 2017
Home / Programming / JavaScript / HTML DOM – JavaScript Tutorial
HTML DOM
HTML DOM

HTML DOM – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

We’re finished with talking about object oriented programming in JavaScript for now. We’re going to talk about the HTML DOM. As I stated in the first tutorial, you should have a good understanding of HTML and CSS. If not, then go learn HTML and CSS. These next couple of tutorials depend on that knowledge.

What is the HTML DOM?

DOM stands for document object model. This basically is a standard for accessing and manipulating HTML elements in a document. The document object is used to grab these elements. We didn’t cover this when we were talking about the document object because this is a different topic in itself.

Basically, every single tag inside your document is considered an object. You’re allowed to have objects inside of objects. Since HTML tags are usually nested, this makes it a very complex tree of tags.

With the DOM, JavaScript gains the ability to create dynamic HTML. Here are some of things you can do with JavaScript &  HMTL DOM.

  • Update and Grab all HTML elements in a page.
  • Update and Grab all HTML attributes in a page.
  • Update and Grab all CSS styles.
  • React to certain events such as mouse clicks and hovers.

You already know how to use the document object. So, let’s expand on this with grabbing elements and changing stuff inside these elements. You already know how to write into the document itself, but what if you wanted to update the text inside a certain HTML element. Let’s learn how to do this.

We haven’t updated our HTML document in a while. Update your body tags to this.

We have some elements with ids and classes. Let’s learn how to grab elements first. Clear up your script and add this bit of code.

The document object has a method named getElementsByTagName(). This method accepts 1 argument which is the name of the HTML tag you would like to grab. We store this in a variable named pThis is to shorten line of code whenever we need to grab this group of elements again.

Let’s now output the amount of <p> tags inside the HTML document. Add this line of code into your script.

Doing this is the same thing as doing this.

We store it in a variable to make our code cleaner. Now, what if you wanted to grab a certain element? This is possible with IDs and classes.

Conclusion

In our next tutorial, I’ll teach you how to actually manipulate HTML tags. The HTML DOM basically converts all HTML tags into objects. Which we can then access using properties and methods. If you would like more information about the HTML getElementsbyTagName() method then go here.

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByTagName

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link