JavaScript - HTML DOM




JavaScript - HTML DOM

The Document Object Model is a programming API for documents. The object model itself closely resembles the structure of the documents it models. For instance, consider this table, taken from an HTML document -

<TABLE>
      <ROWS> 
      <TR> 
      <TD>Shady Grove</TD>
      <TD>Aeolian</TD> 
      </TR> 
      <TR>
      <TD>Over the River, Charlie</TD>
      <TD>Dorian</TD> 
      </TR> 
      </ROWS>
      </TABLE>

This section is designed to give a more precise understanding of the Document Object Model by distinguishing it from other systems that may seem to be like it. Although the Document Object Model was strongly influenced by Dynamic HTML, in Level 1, it does not implement all of Dynamic HTML. In particular, events have not yet been defined. Level 1 is designed to lay a firm foundation for this kind of functionality by providing a robust, flexible model of the document itself.

The Document Object Model is not a binary specification. Document Object Model programs written in the same language will be source code compatible across platforms, but the Document Object Model does not define any form of binary interoperability. The Document Object Model is not a way of persisting objects to XML or HTML. Instead of specifying how objects may be represented in XML, the Document Object Model specifies how XML and HTML documents are represented as objects, so that they may be used in object-oriented programs.

The Document Object Model is not a set of data structures, it is an object model that specifies interfaces. Although this document contains diagrams showing parent/child relationships, these are logical relationships defined by the programming interfaces, not representations of any particular internal data structures. The Document Object Model does not define “the true inner semantics” of XML or HTML. The semantics of those languages are defined by the languages themselves.

The Document Object Model is a programming model designed to respect these semantics. The Document Object Model does not have any ramifications for the way you write XML and HTML documents; any document that can be written in these languages can be represented in the Document Object Model. The Document Object Model, despite its name, is not a competitor to the Component Object Model (COM). COM, like CORBA, is a language independent way to specify interfaces and objects; the Document Object Model is a set of interfaces and objects designed for managing HTML and XML documents. The DOM may be implemented using language-independent systems like COM or CORBA; it may also be implemented using language-specific bindings like the Java or ECMAScript bindings specified in this document.

What is an JavaScript HTML DOM ?

DOM’s API provides various methods for retrieving and modifying content of the document. But one cannot do any action without a tool that can use these methods. Here JavaScript comes to help. For a long time, JavaScript is the No. 1 scripting language on the web. JavaScript enables dynamic HTML and provides tools to control nodes −

set CSS styles, change existing ones;

select and modify any element on the page;

retrieve any element and change its content;

create and remove any element, attribute;

listen and react to any event on the page;

and much more!

What is DOM

At a basic level, the Document Object Model (DOM) is an only API that represents a document as a tree structure and allows you to manipulate this document. Every object in DOM represents a particular part of the page document, also called as node. There are family tree relations between nodes. One node can have ancestors, descendants, and siblings. It enables convenient navigation through the node tree. There are 4 main types of node: element, text, comment and attribute.

With the object model, JavaScript gets all the power it needs to create dynamic HTML, JavaScript can change all the HTML elements in the page. JavaScript can change all the HTML attributes in the page. JavaScript can change all the CSS styles in the page, JavaScript can remove existing HTML elements and attributes. JavaScript can add new HTML elements and attributes JavaScript can react to all existing HTML events in the page. JavaScript can create new HTML events in the page.