The DOM as a tree
Every HTML element becomes a node in a tree. Every node has a parent and zero or more children. The methods you use to find elements (getElementById, querySelector, querySelectorAll) are just tree traversal with a nicer API.
const bookList = document.getElementById('book-list');
const loading = document.getElementById('loading');
const errorMsg = document.getElementById('error-message');
// Or with a selector
const firstCard = document.querySelector('.book-card');
const allCards = document.querySelectorAll('.book-card');Read nodes out of the tree and hold references for later.
One nuance worth knowing: an Element is a specific kind of Node. There are also text nodes, comment nodes, and document nodes. Most of the time you deal with elements, so getElementById and querySelector give you those directly. For the rare case when you need to walk text, the broader childNodes property exists.
Quiz: Quiz
Loading practice…