What is DOM? Why is it important to understand it?
The DOM tree is a crucial concept that needs to be understood and managed in order to make changes to a website. It allows for the application of styles to HTML elements and the addition of functionalities. By manipulating the DOM structure, content, and styles, we can modify the representation of a webpage.
For that reason, there is a difference between the HTML and the DOM, it’s real that both are related but there are differences. According to the Official Documentation of Google Chrome Appendix: HTML versus the DOM While the HTML is the following:
<!doctype html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a hypertext document on the World Wide Web.</p>
<script src="/script.js" async></script>
</body>
</html>The DOM looks like similar to this:
html
head
title
body
h1
p
scriptYou can see the full the full DOM in the following Page: Live DOM Viewer
And also, as a tree DOM Visualizer
After understanding that there is a relationship between: the markup, the DOM and the html, but that there are not the same we can continue understanding that: the Introduction to the DOM source, “It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page. As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.”
All the properties, methods, and events necessary for manipulating and creating web pages are organized into objects. To interact with the DOM, multiple APIs need to be utilized.
The DOM is a logical tree where each branch terminates in a node. Each node contains an object, which can pertain to structure, style, content, or even event handlers.
Each node in the DOM tree can have child nodes, and these child nodes can, in turn, have their own child nodes. Understanding this hierarchical relationship is crucial for traversing and manipulating the DOM effectively.