Search within TutorialsPark

Javascript DOM: Document Object Model


Javascript Document Object Model is used to access and maipulate all the elements of an HTML document.


Javascript DOM : Introduction

The DOM(document Object Model) standard was put forth by W3C(World Wide Web Consortium) for browser companies and web developers to follow.

The DOM is essentially an application programming interface(API) used for HTML and XML documents, it represents the document as a hierarchical tree consisting of nodes.

With DOM each and every element on document is accessible using a common set of properties and methods in Javascript, using which developers can add, remove , manipulate individual elements of the page

The W3C Standard comprises of three sections : DOM Core, XML DOM and HTML DOM

DOM Core: The Core DOM specifications provide a standard to manipulate document structures, elements and attributes.

XML DOM: XML DOM is extension of DOM functionalities for XML Documents

HTML DOM: HTML DOM is extension of DOM functionalities for HTML Documents


Working of Document Object Model(DOM)

1. The DOM model represents the Document as an uprooted tree with the root of the tree at the top.

2. The advantage of having the elements of an HTML document represented as hierarchal tree is to provide a logical structure inorder to navigate and target every element in the document

Consider the simple HTML document shown below followed by the DOM tree structure of the document

Javascript DOM - simple HTML document



Javascript DOM - The Document represented as a DOM Tree



Javascript DOM Tree Explanation

The DOM tree structure comprises of various types of nodes, each type of node is accessed differently while travelling through the DOM tree.

Element Nodes: Generally, for most documents major portions of the DOM tree is occupied by Element Nodes, these nodes define the structure of the document and hold most of the data content which you can target and modify.

Text Nodes: Text Nodes are similar to element nodes but text nodes are contained within element nodes and cannot have child elements like element nodes.

Eg: All the text within the elements(or tags) are text nodes

Attribute Nodes: Attribute nodes are also similar to element nodes and cannot have child elements as well.

But Attribute nodes are not considered as child element of element nodes, they are always attached to the element node, they are accessed and treated differently than other nodes.

Eg: In the above demo attribute of the <meta> element is the attribute node i.e charset="utf-8"


Javascript DOM Standards

Javascript DOM standard follows a generic set of properties and methods, the DOM standard has been broken down into seperate levels inorder to deal with seperate areas.

The different levels of DOM were added to the standard subsequently when they were completed

DOM Level 0

1. It is the most earliest implementation of DOM, there existed no standard when its was implemented in some of the major browsers before 1998.

2. It used accessor names for specific elements, which later got discarded by the arrival of DOM Level 1.


DOM Level 1

1. The DOM level 1 standard was introduced by W3C in the year 1998, it created a hierarchy based on the NODE object from which most of the other objects are derived.

2. It divided the standard into two distinct parts: Core(for both HTML and XML) and HTML(specifically for HTML).

3. The Most common object types of this standard are Document , Element , Attr and Text

4. It defines <html> tag as a special element node, called as the document element, it is accessed using document.documentElement


DOM Level 2

1. The DOM level 2 standard is complete, and many of its methods, properties and events have been implemented by modern day browsers

2. It added new specifications for events, stylesheets, views and traversal ranges.


DOM Level 3

1. The DOM level 3 standard was released in the year 2004, it improved many of the complications from previous standards.

2. Most of the new specification where for XML DOM, hence only a few browsers support the specifications of DOM level 3.

3. The most common used features from this specifications are textContent attribute and isEqualNode


DOM Level 4

1. The DOM level 4 standard was released in the year 2011, and not many browser have implemented its specification completely, but some parts have been implemented.

2. The Most of the common additions of DOM Level4 standard are:

getElementByClassName , prepend , append , before , after, replace and remove