DEV Community

Cover image for HTML Document Object Model
Karthick (k)
Karthick (k)

Posted on

HTML Document Object Model

#webdev #ai #programming #html

DOM tree

The backbone of an HTML document is tags.

According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are “children” of the enclosing one. The text inside a tag is an object as well.

All these objects are accessible using JavaScript, and we can use them to modify the page.

For example, document.body is the object representing the tag.

Running this code will make the red for 3 seconds:

An example of the DOM

Let’s start with the following simple document:

<!DOCTYPE HTML>
<html>
<head>
  <title>About elk</title>
</head>
<body>
  The truth about elk.
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Summary

An HTML/XML document is represented inside the browser as the DOM tree.

Tags become element nodes and form the structure.
Text becomes text nodes.
…etc, everything in HTML has its place in the DOM, even comments.

Top comments (0)