Understanding and handling the DOM

In this article, you will learn what the document object model (DOM) is, how it is structured, how to query and handle it.

The DOM is an extremely important concept in web development and, I venture to say, every one programming for the web (especially frontend developers) should know what it is and how it can be handled. And this is what this article is about. Have a good read!

What is the DOM?

In order to create a web page, the minimum you need is an HTML file. For, example, this is a very simple page:

<!DOCTYPE html>
<html>
<head>
  <title>A very basic page</title>
</head>
<body>
  <p>This is a very basic page.</p>
</body>
</html>

If you save the above code to an HTML file (e.g. index.html_),_ and open it in a browser, this is what is rendered:

And if you inspect the page, this is what you will see:

Well, as you can see, it shows exactly the same markup from the HTML file that we’ve created.

Changing the page dynamically

Now, open your browser console and run the following code:

const newParagraph = document.createElement('p');
newParagraph.innerText = 'And this is a dynamically created paragraph';
document.body.appendChild(newParagraph);

#web-development #javascript #react #developer

What is the DOM?

Changing the page dynamically

programmingwithmosh.com

Understanding and handling the DOM