Introduction To DOM (Document Object Model)

Inroduction

Basically DOM stands for Document Object Model,

Document Object Model is a programming interface or an API for manipulating the HTML or XML documents.
DOM represents the content of the HTML or XML document as a tree structure.
It allows us to create, change or remove the elements from that HTML or XML document.
It gives us capability to add events to the elements to make our page more flexible and dynamic.

XML Code

<books>
  <book>
    <author> Jay </author>
    <Title> DOM</Title>
    <PublishedDate>16-06-2022</PublishedDate>
  </book>
</books>

DOM Tree Convertion

HTML Code

<html>
  <head>
    <title>Introduction to DOM Elements</title>
  </head>
  <body>
    <h1> Jay Krishna Reddy</h1>
    <p>Here is my blog</p>
  </body>
</html>

Tree Convertion

As per the above tree image, in this dom tree, the document is the root node. The root node has one child node which is the html element.
The <html> element is called as the document element.
Each markup can be represented by a node in that tree.

Conclusion

Thank you for reading, please let me know your questions, thoughts, or feedback in the comments section. I appreciate your feedback and encouragement.

Keep learning ...!

1 Comment

Join the conversation! Your thoughts help the community grow.

Bohdan Stupak4y ago
Great introduction. Once I was more involved with front-end I recall adding too many nodes to my DOM tree brought the browser to it's knees since editing DOM tree is a computation-heavy operation. This is the reason why shadow-DOM was invented.