DOM Structure

The Document Object Model (DOM) is at the core of every HTML page. The DOM originated as a specification to allow JavaScript scripts and Java programs to be portable among Web browsers . It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

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. One characteristic of the DOM is how it handles attributes. Attributes are considered a property of the element node and are made up of a name and a value pair. Also, there are several node types in the tree, each representing different information or mark-up in the HTML document . Each node type has different properties, methods, data, events, and each may have relationships with other nodes.


When a web page is loaded in the browser, the rendering engine will start parsing the HTML document and convert elements to DOM nodes in a tree called the "content tree". Each and every single element in the document will have a corresponding presence in the DOM.


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

DOM representation of HTML Tags

Javascript dom
Tags are called element nodes (or just elements). Nested tags become children of the enclosing ones. As a result we have a tree of elements: < html> is at the root, then < head> and < body> are its children, etc. 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


<html>.<body>.<h1> 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.