Javascript Document Object Model (DOM)

Javascript DOM

The HTML Document Object Model (DOM) is one of the most important aspects of JavaScript that you'll encounter. The DOM is an interface to the web document provided by the browser manufacturer. It is governed by its own standard, maintained by the W3C (World Wide Web Consortium).

Document Object Model

The DOM (Document Object Model) is an API (Application Programming Interface) for HTML and XML documents. It represents a web document or a web page, that allows developers a way of representing everything on a web document so that it is accessible via a common set of properties and methods. The DOM is browser independent as well as platform independent and it achieves this independence by representing the contents of the web document as a generic tree structure.

DOM Node

The DOM (Document Object Model) represents a document as a hierarchical tree structure and each element in the document tree is called a Node in the DOM. The main object in the tree structure is the Document Object, which in turn contains several other child objects. Also several properties of the document object include information about the current document in general. For e.g. document.title represent the title of the current page, defined by the HTML < title > tag.

<script type="text/javascript">
  alert(document.title);
</script>

The above code will alert the Title of the HTML page. DOM also allows the developers to access the document via a common set of properties, methods and to alter the contents of the web page dynamically using JavaScripts. It also provides an event model for capturing user interactions with the HTML document like like key presses, mouse movements etc. At the end of the following lessons you should have a solid understanding of the DOM and its inner workings.