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!
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.
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