The DOM Basics

The Document Object Model (DOM) is how JavaScript interacts with the structure of an HTML page. You can select elements, change their content, and modify their style using DOM methods.

Selecting Elements‍

let heading = document.getElementById("main-heading");
let paragraphs = document.getElementsByTagName("p");
let firstButton = document.querySelector("button");

‍Changing Content‍

heading.textContent = "New Heading Text";

‍Changing Styles

heading.style.color = "blue";
heading.style.fontSize = "24px";

Creating and Adding Elements

let newDiv = document.createElement("div");
newDiv.textContent = "Hello, DOM!";
document.body.appendChild(newDiv);

‍