We have already spoken about the DOM in other chapters ("Beginning of DOM" and "JS Basics/DOM") but since it's so important part of web programming, let us briefly re-introduce the document object model (DOM) in this introduction.

The DOM or Document Object Model is structured representation of a document. W3C DOM standard has 3 parts:

  • Core DOM (standard model for all documents),
  • XML DOM (standard model for XML documents),
  • HTML DOM (standard model for HTML documents).

HTML DOM is the standard object model for HTML which defines HTML elements as objects, and defines all properties, methods and events of HTML elements. 

The webpage document can be displayed in three ways: as a webpage in browser, as a HTML source in text editor, or a as DOM. In DOM, entire page is mapped as a hierarchy of nodes. This allows the user to control it’s content and structure by adding, replacing, removing and modifying the nodes. DOM is not a JavaScript specific and has been implemented in number of other languages. However, for web developers, DOM is implemented by using ECMA script and is mostly JavaScript. 

Consider the sample program given below:

<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

The above code can be represented as a tree structure (shown in drawing below). Each box represents an object and a global variable called document that gives an access to the objects. The boxes are called nodes of the tree structure and represent HTML tags, and they determine the structure of the document. The document's is the root node. Nodes in turn refer to other nodes as children. The node directly above a node is its parent node. Nodes at the same level with same parent are called siblings. With this type of the object model, JavaScript can change all HTML elements, attributes, handle HTML events and modify CSS styles of the page.

JavaScript DOM basic nodes drawings

 

 

 

 

 

 

›› go to examples ››