DOM Basics

The DOM (Document Object Model) is how JavaScript sees and changes a webpage. This is where HTML, CSS, and JavaScript actually come together — this example is fully live, so try clicking the button in the result below.

Selecting an element

document.querySelector() finds an element on the page using a CSS-style selector, so the same syntax you learned in the CSS course works here too.

Responding to a click

Try editing the message text, then click the button in the result panel to see it appear:

Try it yourself
Result

Changing styles from JavaScript

You can also change an element's CSS directly through .style:

Try it yourself
Result
PreviousFunctions