Tree StructureThe 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.
DOM and HTMLWhen 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
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 : represents the HTMLElment, that is <html> tag. document.childNodes.childNodes : represents HTMLBOdyElement, that is <body> tag document.childNodes.childNodes.childNodes : represents HTMLHeadingElement, that is <h1> tag.