Software Development Solutions: Step By Step JavaScript DOM

2015-03-30

Step By Step JavaScript DOM

DOM stands for Document Object Model. It is a standard defined by W3C (World Wide Web Consortium). DOM is a programming interface (API) for representing and interacting with HTML, XHTML and XML documents. It organize the elements of the document in tree structure (DOM tree) and in the DOM tree, all elements of the document are defined as objects (tree nodes) which have properties and methods.

DOM tree objects can be accessed and manipulated with the help of any programming language since it is cross-platform and language independent. Typically, we manipulate DOM tree with the help of JavaScript and jQuery.

DOM API

Here, I am sharing some DOM API's objects, methods and properties.

DOM API Objects

window

The window object represents an open window containing a DOM document.
document

The document object represents the HTML document in a specific window.
history

This object contains information about the URLs visited by the client.
location

This object contains information about the current URL.
navigator

This object contains information about the client.

DOM API Methods

DOM methods are actions which you can perform on document elements.

appendChild

This method appends an element as a child to the object..
createElement

This method creates an instance of the element for the specified tag.
reload

This method reloads the current document.
removeNode

This method removes the object from the document hierarchy..

DOM API Properties

HTML DOM properties are values (of document Elements) that you can set or change

appName

This property retrieves the name of the client.
appVersion

This property Retrieves the platform and version of the application.
href

This property sets or retrieves the entire URL as a string.

DOM API Example

HTML DOM

When a web page is loaded, the browser creates a DOM tree for all the objects (Html elements) of that page. The HTML DOM is a fully object-oriented representation of your web page and in HTML DOM each and everything is a node. DOM tree nodes can be removed, added, and replaced by using DOM API.

Types of HTML DOM Tree Nodes

Document Node

This node represents the HTML document.
Element Node

This node represents an HTML element.
Attribute Node

This node represents an HTML element's attribute.
Text Node

This node represents Text inside an HTML element.
Comment Node

This node represents HTML Comment.

A Simple DOM Tree


<HTML>
<HEAD>
 <TITLE>Your Title</TITLE>
 <SCRIPT src="www.webgeekschool.com/jsfile.js"></SCRIPT>
</HEAD>
<BODY>
 <DIV>Your Div Text</DIV>
 <P>Your Para Text</p>
</BODY>
</HTML>

DOM tree representaion of above web page is given below:

Software Development Solutions