DEV Community

Steven Frasica
Steven Frasica

Posted on

What is the DOM?

The DOM stands for Document Object Model, a representation of the web page, made up of HTML. The interface is essentially what we see on the web page. You can manipulate the DOM and make various changes to it.

The DOM is an organizational chart of the HTML elements that make up a web page. Your web browser generates the DOM. The DOM is a hierarchy allowing you to see structure of the nodes.

On a standard web page, the DOM always consists of these three basic levels - the document element, html element, and the head and body are both on the third level.

An individual unit in the DOM is a node. We have the document node, html node, head node, body node, title node, etc. The document node holds all of the other nodes. It is the parent node. There are text nodes, which are the content inside nodes such as title and paragraphs. Text node is the lowest level node and it cannot hold other nodes. These are the strings of characters that you can read on a web page. Element nodes are nodes such as <p>, <body>, <a>, <div>, etc.

This is a basic representation of the structure.

1st level: document
 2nd level: <html>
  3rd level: <head>
   4th level: <title> 
    5th level: Title of Project
   4th level: </title>
  3rd level: </head>
  3rd level: <body>
   4th level: <p>
    5th level: Here's the content of our project
   4th level: </p>
  3rd level: </body>
 2nd level: </html>

Discussion (0)