DOM

Source: Dev.to

What is getElementById()?

It is used to select a single HTML element using its unique id attribute.
It returns an Element object if a match is found; otherwise, it returns null.

Basic usage

## Hello

let el = document.getElementById("title");
console.log(el);

Output

## Hello

Manipulating the selected element

let el = document.getElementById("title");

// Change text content
el.textContent = "Hello, JavaScript!";
el.innerText = "Hi!";

// Insert HTML
el.innerHTML = "**How**";

// Style the element
el.style.color = "red";
el.style.backgroundColor = "yellow";

// Style the page background
document.body.style.backgroundColor = "black";

Full example with a button

## Hello

click

let el = document.getElementById("title");
let btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  el.innerText = "Welcome!";
});