DEV Community

Cover image for JavaScript HTML DOM
Mursal Furqan Kumbhar
Mursal Furqan Kumbhar

Posted on

JavaScript HTML DOM

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.
Main DOM

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.
Generalized DOM

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-->

     <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>
Enter fullscreen mode Exit fullscreen mode

DOM Tree


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 (0)