JavaScript can access and modify all parts of an HTML document via the HTML The Document Object Model (DOM) in HTML .The browser produces a Document Object Model of a web page when it is loaded. The HTML DOM model is built as a hierarchy of Objects:
Your web page is represented by the document object. When you wish to get to any element on an HTML page, you must first get to the document object.
const id = document.getElementById("id");
const p_tag = document.getElementsByTagName("p");
const classname = document.getElementsByClassName("class");
const query_id = document.querySelector("#id");
const query_class = document.querySelectorAll(".class");
You'll frequently wish to manipulate HTML elements with JavaScript.To do so, you must first locate the components. There are various options for accomplishing this:
Identifying HTML elements based on their ids
Using the tag name to locate HTML elements
Finding HTML elements based on their class names
CSS selectors are used to locate HTML elements.
document.getElementById("id").innerHTML = "<em>italic</em>";
The innerHTML attribute is the simplest way to change the content of an HTML element.
document.getElementById("img").src = "image.jpg";
document.getElementById("a").href = "<https://some.site.com>";
Use the above syntax to update the value of an HTML attribute
document.write("Hello");
Document.write() in JavaScript can be used to write straight to the HTML file.
document.getElementById(id).style.property = value;
document.getElementById("heading").style.color = "blue";
document.getElementById("heading").style.backgroundColor = "red";
JavaScript may change the style of HTML elements thanks to the HTML DOM. Use the above syntax to modify the style of an HTML element. It's important to note that the background color in CSS is written as backgroundColor rather than background-color. This also applies to other styles with several words.
Events