In order to master jQuery programming better, this is necessary to  have a basic understanding of Document Object Model (DOM). I just want to discuss DOM briefly so that everybody should be much easier to understand.

You may consider a webpage document is made up with objects (or nodes, or elements). In other words, each element of a webpage is an object. Therefore all elements combined together form the webpage document. This concept is very important. If each element of a webpage is an object, we should be able to use script to find a way to control the elements (for example, change the color, width, height, etc…).

Let’s take a very simple HTML example to explain the structure of DOM.

The above HTML webpage document has 7 objects:

  • the outermost html object
  • the head object,
  • the title object,
  • the text (text note) inside the title tag
  • the body object,
  • the paragraph p object
  • the text (text note) inside the p tag

Actually the DOM is best illustrated with a tree chart, as this is much easier to understand:

Remember that the html itself is a document object.

Therefore when a browser display a webpage. It simply use the DOM to assemble the objects together, one by one , from top to bottom, into a document object, and finally display on the screen.

As you can see, each object on the DOM tree can easily be accessed by specifying the correct path or location.

For example, paragraph p object can be accessed through the path:

And the text (text note) inside the p tag can be accessed through the path:

With JavaScript, accessing the objects on the DOM tree require a long and complicated syntax. However it only requires a very short syntax to access or select any object on the DOM tree.