The DOM from JavaScript
The browser turns HTML into the DOM: a tree of objects called nodes that JavaScript can read and change. Follow a seven-line script through a shopping list: find the list, make a new item outside the tree, fill it, append it, give it a class, remove the old item and count what is left. Then watch the screen catch up once the script has finished.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01What is the DOM?
The browser parses the HTML into a tree of node objects. document is its root; changing the tree changes the page.
02After const item = document.createElement("li"); runs, where is the new li?
createElement makes a new element that is not attached to the tree. It shows up only after append (or a similar method) puts it under a parent.
03list = document.querySelector("#list"). You then call list.append(item). What changes?
querySelector returns the node itself. list is a reference to it, so a change through list is a change to the tree.
04The ul holds Milk then Eggs. What does list.firstElementChild.remove() do?
firstElementChild is the first child that is an element (Milk). remove() takes that element out of its parent.
05A script changes the tree seven times in a row. When does the screen show the changes?
A script runs to completion. The browser updates the rendering between tasks, so you see the final tree, not the steps in between.
Glossary
- DOM
- Document Object Model: the tree of objects the browser builds from the HTML. Changing it changes the page.
- Node
- One object in the DOM tree, such as an element (ul, li) or a piece of text. document is the root node.
- Parent / child
- A node directly above another in the tree is its parent; the nodes directly below it are its children.
- querySelector
- A method that returns the first element matching a CSS selector, searching the tree in document order, or null.
- createElement
- A method that makes a new element. It is not in the tree, and not on the page, until you add it.
- append
- A method that adds nodes after the last child of an element.
- classList
- An element's list of classes. classList.add puts a class on it, so CSS rules for that class apply.
- Live collection
- A list such as element.children that always reflects the tree as it is right now.
Notes and sources
- The figure shows only element nodes. The real tree also has a head element (the style element is placed in it), the script element, and text nodes: the text Milk is itself a text node inside the li, and the line breaks between the tags become text nodes too.
- querySelector checks elements in document order, a depth-first walk from the top, and returns the first element that matches the CSS selector, or null if none does. document.getElementById("list") would find the same ul.
- list and item hold references to node objects, not copies. Changing an element through a variable changes the one node in the tree.
- remove() only takes Milk out of the tree. The object lives on while something still refers to it; nothing does here, so the JavaScript engine can free it later.
- Whether you ever see Milk depends on timing: a browser may draw the part of the page above the script while it fetches todo.js. Either way, no drawing happens while the seven lines run.
- Both files are real. Save them side by side, open todo.html in a browser, and the page shows one bold bullet, Eggs; the console shows 1.
- MDN: Introduction to the DOM
- MDN: Document.querySelector()
- MDN: Document.createElement()
- MDN: Node.textContent
- MDN: Element.append()
- MDN: Element.classList
- MDN: Element.firstElementChild
- MDN: Element.remove()
- MDN: Element.children
- MDN: JavaScript execution model
- HTML Standard: event loop processing model
- ECMAScript Language Specification (ECMA-262)
Quiz Unlocks after the last step.