Understanding Document Object Model

Document Object Model (DOM) :

A web browser request for a web pages to a server. The Server delievers the web pages based on the request of web browser.  This is a simple request response flow.

Web pages are nothing but the html documents and their is a need of the structured representation of the document. So DOM Provides a structured representation to our html document. Using this we can modify our webpages.

The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods.
And this representation is object oriented and it can be modified with a scripting language.

For DOM we have standard W3 Representation.

All of the properties, methods, and events available for manipulating and creating web pages are organized into objects (e.g., the document object that represents the document itself, the table object that implements the special HTMLTableElement DOM interface for accessing HTML tables, and so forth).

JavaScript uses the DOM to access the document and its elements.

Every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the DOM and a scripting language like JavaScript.

The page content is stored in the DOM and may be accessed and manipulated via JavaScript, so that we may write this approximative equation:

API (HTML or XML page) = DOM + JS (scripting language)
Important Data Types : document, element, nodeList is an array of elements like the method document.getElementsByTagName() ,attribute

The following is a brief list of common APIs in web and XML page scripting using the DOM.

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute
element.getAttribute
element.addEventListener
window.content
window.onload
window.dump
window.scrollTo

Source : https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#What_is_the_DOM

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s