The DOM (Document Object Model) is a representation of an HTML document as a tree structure. It allows programming languages (like JavaScript) to interact with, modify, and manipulate web pages dynamically.
What is the DOM Tree?
Imagine a webpage as a family tree where:
- The entire document (HTML) is the root.
- Different parts of the document (head, body, elements) are like branches and leaves.
- Each element inside the page is a node in this tree.
How the DOM Tree Represents the HTML
Example 1: With new line and space
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Document
├── html
│ ├── head
│ │ ├── title
│ │ │ └── "My Page"
│ │ └── "\n "
│ ├── "\n "
│ └── body
│ ├── "\n "
│ ├── h1
│ │ └── "Hello, World!"
│ ├── "\n "
│ ├── p
│ │ └── "This is a paragraph."
│ └── "\n "
└── "\n"
you can see for each new line there is a TextNodes "\n "
Example 2: Without and new line and space
<html>
<head><title>My Page</title></head><body><h1>Hello, World!</h1><p>This is a paragraph.</p></body>
</html>
[Document]
|
<html>
/ \\
<head> <body>
| |
<title> <h1> <p>
| | |
"My Page" "Hello,..." "This is..."
In this scenario, there are no new lines (TextNodes)
Breaking it down:
-
Root Node:
Document– The whole page (browser creates it automatically). -
Element Nodes:
<html>,<head>,<body>,<h1>,<p>– Represent HTML tags. -
Text Nodes: Inside elements, like
"\n ","My Page","Hello, World!", and"This is a paragraph." -
Attributes (not shown in tree): Elements can have attributes like
id,class, etc.
Types of Nodes in the DOM Tree
The DOM tree consists of different types of nodes:
-
Document Node: Represents the entire document (
documentin JS). -
Element Nodes: HTML elements (e.g.,
<body>,<h1>,<p>). -
Text Nodes: Text inside elements (e.g.,
"\n ",Hello, World!). -
Attribute Nodes: Represent element attributes (e.g.,
class="example"). -
Comment Nodes: Represent HTML comments (
<!-- This is a comment -->).
Accessing the DOM Using JavaScript
JavaScript allows us to manipulate the DOM using methods like:
1. Accessing Elements
console.log(document.documentElement); // Gets <html> element
console.log(document.body); // Gets <body> element
console.log(document.title); // Gets page title
2. Selecting Specific Elements
const heading = document.querySelector('h1'); // Select <h1>
console.log(heading.textContent); // Output: Hello, World!
DOM Tree Relationships
The DOM tree has relationships between nodes:
-
Parent Node: A node that contains other nodes inside it.
- Example:
<body>is the parent of<h1>and<p>.
- Example:
-
Child Nodes: Nodes inside a parent node.
- Example:
<h1>and<p>are children of<body>.
- Example:
-
Sibling Nodes: Nodes at the same level under the same parent.
- Example:
<h1>and<p>are siblings.
- Example:
Example (Relationships)
<html>
<head></head>
<body>
<h1>Hello</h1>
<p>Welcome</p>
</body>
</html>
-
Parent:
<html> -
Children:
<head>,<body> -
Siblings:
<h1>and<p>
Get different elements
const rootElement = document.getRootNode(); // To get the root node
console.log(rootElement); // Output: #document object
const childNodesOfRoot = rootElement.childNodes; // To get all the child nodes of any Element
console.log(childNodesOfRoot) // Output: #html object
const childNodesOfHTML = childNodesOfRoot[0].childNodes; // To get all the child nodes of any Element
console.log(childNodesOfHTML) // Output: #head object, #textNode("\n ") object, #body object
Conclusion
- The DOM represents the structure of an HTML document in a tree format.
- JavaScript can be used to manipulate the DOM to update content dynamically.
- Understanding DOM relationships helps in selecting and modifying elements easily.
Top comments (0)