Hello Everyone 👋
In this article, we will start the concept of Document Object Model (DOM). DOM is a very important part to learn while learning JavaScript/ You can say the real use of JavaScript starts from here. In Simple Words, your HTML document or document's elements are stored in the form of objects (nodes & children) in the JavaScript document object through which you can access them by using JavaScript.
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.
Node Relationships
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>
Takeaways
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>and<body> -
<head>is the first child of<html> -
<body>is the second child of<html> -
<head>has one child:<title> -
<title>has one child (a text node): "DOM Tutorial by Mursal" -
<body>has two children:<h1>and<p> -
<h1>has one child: "DOM Lessen one" -
<p>has one child: "Hello World!" -
<h1>and<p>are siblings
In our next article, we will be discussing how we can access a DOM Object using JavaScript.
Top comments (1)
Adding an
from JavaScript will it take siblings from my html
tag?