What is DOM?

The Document Object Model (DOM) is a programming interface for HTML documents. It represents the page so that programs can change the document structure, style, and content.

DOM Methods to find HTML elements:

Get Element by Id

Returns the element that has the ID attribute with the specified value.

let element = document.getElementById("myElement");

Get Elements By Class Name

Returns a collection of all elements in the document with the specified class name.

let elements = document.getElementsByClassName("myClass");

Get Elements By Tag Name

Returns a collection of all elements in the document with the specified tag name.

let elements = document.getElementsByTagName("p");

Query Selector All

Returns all elements that matches a specified CSS selector(s) in the document

let elements = document.querySelectorAll(".myClass");

InnerHTML

Gets or sets the HTML content within an element.

element.innerHTML = "<p>New HTML content</p>";

InnerText

Gets or sets the text content within an element.