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.
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:
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.
The above code will represents the HTMLHeadingElement < h1 > element in the above markup.
represents the HTMLElment, that is < html > tag.
represents HTMLBOdyElement, that is < body > tag.
represents HTMLHeadingElement, that is < h1 > tag.
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.
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.