JS DOM Intro

Relax. We'll talk through this in plain words — no textbook voice.

DOM (Document Object Model) is an object-based representation of an HTML document. JavaScript can use the DOM to change an HTML document's content, structure, and style.

Every HTML element is an object (node) inside the DOM. With JavaScript, you can access and manipulate those objects.

javascript

// The DOM allows JS to interact with the HTML page.
// For example, finding an element and changing its content.

// HTML: <p id="demo"></p>
// JS:
// document.getElementById("demo").innerHTML = "Hello from DOM!";

console.log("This is a conceptual lesson.");

You should see

(The text of the p element on the HTML page changes to 'Hello from DOM!')