What is HTML DOM?

Now that we have covered all the basic stuff in JavaScript we can now move on to look at its capability in the sector of HTML and CSS.

The HTML Document Object Model, or HTML DOM, or simply just DOM is an application programming interface which provides with features to get, set, update, add, remove and style HTML content. The API comes by default with JavaScript and hence no installations are required on your side.

The DOM is what has made JavaScript such a popular web language. It can make web pages dynamic and interactive enhancing a user's experience. It is so common and so useful that majority of the websites even with least of scripting use it in some way. The DOM is fun! As you will walk through this unit you will seriously enjoy playing with HTML - live, on the go and also appreciate the power of the Document Object Model.

As the name implies, DOM is simply a model of a web page built using objects. The model takes care of all the elements on a webpage and all of its styling. The objects have numerous properties and methods available to them which together form the functionality of DOM. In this unit we will see how HTML DOM can be used to:

  1. Get
  2. Set
  3. Update
  4. Add
  5. Remove, and
  6. Style HTML content.

Some of these parts will be given whole chapters, while some will be given sections in chapters depending on the content. So let's begin the DOM without wasting any more time!