Hello Everyone 👋
When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM is constructed as a tree of Objects (nodes and childnodes). Refer to the figure below for visual representation.
Nodes & Childnodes
All parts of the document, such as elements, attributes, text, etc. are organized in a tree like structure; consisting of parents (e.g.: body element) and children (e.g.: H1, Script elements). These individual parts of the document are known as nodes and childnodes.
The term parent, child, and siblings are used to describe the relationships.
- In a node tree, the top node s called the root (or a root node)
- Every node has exactly one parent, except the root (which has no parent)
- A node can have a number of children
- Siblings (brothers or sisters) are nodes with same parent
Take a look at this piece of code followed by a visual representation in the form of a DOM Tree for a better understanding of above given points.
<html> <!––Root Node/Element--> <head> <! ––First Child of Root --> <title>DOM Tutorial by Mursal</title> <! ––Child of Head Node--> </head> <body> <! ––Last child of root --> <! ––Child Nodes of Body node and sibling nodes of each other --> <h1>DOM Lesson one</h1> <p>Hello World!</p> </body> </html>
From the above given code and illustrations, you can read
<html>is the root node
<html>has no parents
<html>is a parent of
<head>is the first child of
<body>is the second child of
<head>has one child:
<title>has one child (a text node): "DOM Tutorial by Mursal"
<body>has two children:
<h1>has one child: "DOM Lessen one"
<p>has one child: "Hello World!"
Top comments (0)