Javascript DOM Structure

DOM Structure

The DOM (Document Object Model) is an interface to the web document provided by the browser manufacturer. Within this model, each element in the HTML document becomes an Object. In order to work with the browser and documents, JavaScript uses a hierarchical tree structure of parent and child Objects. The main object is the Document Object, which in turn contains several other child objects. Each Object or element in the document is called a Node in the DOM.

Tree Structure

The DOM represents a document as a hierarchical tree of nodes, which can have parents, children, and siblings and this determines by its position in the tree structure. There are several node types in the tree, each representing different information or markup in the HTML document. Each node type has different properties, methods, data, events, and each may have relationships with other nodes.

HTML Document

The Document Object Model provides a uniform representation of the HTML document, and it achieves this by representing the entire HTML document as a tree structure. When a web page is loaded in the browser, it creates a Document Object Model of the web page. Each and every single element in the document will have a corresponding presence in the DOM.

Sample HTML Page:

<!DOCTYPE html>
<html>
	<head>
		<title>The DOM</title>
	</head>
	<body>
		<h1>Document Object Model</h1>
		<p id="pr">Test Paragraph</p>
	</body>
</html>

Document Object Model representation:

Nodes within the DOM are represented by array-like node lists and the individual nodes themselves can be accessed via their index. Using the above tree of nodes, you can access any element in the DOM.

example

document.childNodes[1].childNodes[1].childNodes[1]

The above code will represents the HTMLHeadingElement < h1 > element in the above markup.

Explanation:

document.childNodes[1]

represents the HTMLElment, that is < html > tag.

document.childNodes[1].childNodes[1]

represents HTMLBOdyElement, that is < body > tag.

document.childNodes[1].childNodes[1].childNodes[1]

represents HTMLHeadingElement, that is < h1 > tag.

that is

<html>.<body>.<h1>

Getting Information About the Document

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 DOM", the Title of the HTML page.

Other important information about the document are :

document.URL : Represents the document's URL.

document.lastModified : The date which the document was last modified.

document.cookie : It enables you to read or set a cookie for the document.

document.images : It returns a collection of images used in the document.

Basic Node Properties

The Document Object Model represents a document as a hierarchical tree structure and each element in the document tree is called a Node. Moreover, each node also has a number of basic properties that you can get or set values. The following are the frequently used properties of a DOM Node.

nodeName : This will returns the name of the current node as a string.

nodeType : This will returns an unsigned short integer representing the type of the node.

nodeValue : This will returns or sets the value of the current node.

innerHTML : This will return or set the HTML syntax describing the element's descendants.