← JavaScript Essentials
DOM and browser interaction · 15 MIN

Selecting and changing DOM elements

Selecting and changing DOM elements

The DOM represents a document as objects. querySelector selects the first matching element; querySelectorAll returns a static NodeList. Prefer textContent for plain text and createElement for safe dynamic elements instead of inserting untrusted HTML.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.

Code example

const heading = document.querySelector("h1");
heading.textContent = "Welcome to JavaScript";