The Document Object Model (DOM) is an application programming interface (API) originally intended for XML language but soon applied to HTML as well.

A DOM application is intended to be a tool used to map out nodes inside an HTML or XML document. Each item that is a part of a document's structure is considered to be a node. That includes, all elements, text content, attributes, comments, and any other end point that may be reached throughout a document tree.

To understand the concept of a node in the hierarchy of a document, refer to the diagram below.

A typical HTML document tree with its nodes looks like this:

<html>

   <head>

      <title>JS tutorial</title>

   </head>

   <body>

      <p>Hello visitor!</p>

   </body>

</html>

Or visualized as a diagram:

javascript DOM diagram

 

 

 

 

 

 

 

 

 

 

 

More about document object model (DOM) in chapters: JavaScript DOM tutorial, DOM extensions and DOM models 2 and 3.

NOTE: One of the DOM features is being used quite often throughout the tutorial, even before reaching the Document Object Model chapter. That is the write() method.

The write() method is very suitable for outputting the results to an HTML document and therefore very handy for showing the results of our tutorial's examples.

Example

Basic JavaScript DOM concept:

 

›› go to examples ››