What you’ll learn
- What the DOM is (the page's family tree)
- Selecting elements with
querySelector - Changing text with
textContent - Why
innerHTMLcan be dangerous - Changing styles and CSS classes
- Reading and setting attributes
- Creating, adding and removing elements
- Building a page from an array of data
The pages
Ten pages, about 13 minutes.
- What Is the DOM? Up until now, our programs have lived in the console. That's fine for learning, but nobody visits a website to stare…
- Your Practice Page Let's set up a page to experiment with. Create a new folder called dom-practice, and inside it, create these two…
- Selecting Elements Before you can change something on the page, you have to find it. JavaScript gives you several ways to grab elements…
- Changing Text and HTML Once you've got an element, you can change what's inside it. textContent reads or changes the text inside an element…
- Changing Styles Every element has a style property that lets you change its CSS directly. Notice that CSS properties with hyphens…
- Working With Attributes HTML attributes (like src, href, alt, id and class) can also be read and changed. Form elements have their own useful…
- Creating, Adding and Removing Elements So far we've changed elements that already existed. But you can also create brand-new elements from scratch and add…
- Walking the Tree Since the DOM is a family tree, every element knows its relatives. You can move around the tree from any element. You…
- Mini Project: The Team Page Let's build a "Meet the Team" page entirely from data. The HTML is almost empty. JavaScript does all the work. Open it…
- Recap The key ideas of Grade 11, the JavaScript DOM, on one page. The DOM (Document Object Model) is the browser's live…
Reading is step one
CurlyScript turns these notes into a game: short questions, an explanation after every answer, and a test at the end of each grade. Free, with nothing to sign up for.