let's talk about DOM (document object model) :
The DOM tree looks like a hierarchical structure of nodes, where each node represents an element, attribute, or text in the document. Here is an example of a DOM tree for a simple HTML document:
<html>
<head>
<title>My Document</title>
</head>
<body>
<div id="container">
<h1>Header</h1>
<p>Paragraph</p>
</div>
</body>
</html>
DOM stands for Document Object Model, which is a standard way of representing and manipulating web documents.
The DOM represents the document as a tree of objects, each with properties and methods that can be accessed and changed by JavaScript.
How to Use the DOM to Edit HTML Elements?
The first step to edit or delete HTML elements is to select them using the document object.
document.getElementById(id) — returns the element with the specified id
For example, to select the
element with the id “container” in your document, you can use:let container = document.getElementById("container");
you can edit content, attributes, styles, or classes using various properties and methods :
so if we have :
<html>
<head>
<title>My Document</title>
</head>
<body>
<div id="container">
<h1>Header</h1>
<p>Paragraph</p>
</div>
</body>
<script src="index.js"></script>
</html>
let container = document.getElementById("container");
container.style.backgroundColor="green";
and if we run it in the browser the background color looks like green without writing any CSS code :)
Top comments (0)