javaScript dom introduction

what is the dom

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The dOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Essentially, it connects web pages to scripts or programming languages.

A Web page is a document. This document can be either displayed in the browser window, or as the hTML source. But it is the same document in both cases. The Document Object Model (DOM) provides another way to represent, store and manipulate that same document. The DOM is a fully object-oriented representation of the web page, and it can be modified with a scripting language such as JavaScript.

the html dom model is evaluated as a tree of objects:

the graphical representation of the dom hierarchy :


the w3c is grouping the pieces of the dom concept into the following five categories:

  • dom core : specifies a model for viewing and manipulating a marked up document as a tree structure.
  • dom html : provides the capabilities to manipulate all of the html element objects.
  • dom css    : provides the interfaces necessary to manipulate css rules programmatically.
  • dom events : adds event handling to the dom .these events range from familiar user interface events such as mouse clicks to dom-specific events that fire when actions occur that modify parts of the document tree.
  • dom xml - specifies an extension to the core dom for use with xml. dom xml address the particular needs of xml, such as cdata section, processing instructions, namespaces, and so on.

using dom power, you can do ...

  • accessing nodes.
  • traversing the dom.
  • manipulating elements.
  • attach events.