The DOM: Understanding the Tree and Selecting Elements

When the browser loads a page, it reads the HTML and builds in memory a tree of objects: the DOM (Document Object Model). Each tag becomes an element object, with properties and methods. JavaScript can read and modify this tree; the browser then updates the display automatically.

<body>
  <h1>Store</h1>
  <ul class="produits">
    <li class="produit" data-id="12">Sac <span class="prix">59 €</span></li>
    <li class="produit" data-id="15">Gourde <span class="prix">12 €</span></li>
  </ul>
</body>

Here, body has two children (h1 and ul), ul has two li children, and so on. The Elements tab of the inspector shows exactly this tree, in its current state (including changes made by JavaScript), whereas “View page source” shows the original HTML.

Loading the script at the right time

A script can only manipulate elements that have already been built. The modern solution:

<head>
  <script src="app.js" defer></script>         <!-- executed after the HTML is parsed -->
  <!-- or -->
  <script type="module" src="app.js"></script> <!-- modules are deferred by default -->
</head>

Without defer or type="module", a script placed in the <head> runs before the <body> exists: your selections will return null.

Selecting with CSS selectors

You already know CSS selectors: they are also used in JavaScript.

// first matching element, or null if there is none
const titre = document.querySelector("h1");
const liste = document.querySelector(".produits");
const sac = document.querySelector('[data-id="12"]');

// all matching elements: a NodeList
const produits = document.querySelectorAll(".produit");
console.log(produits.length);            // 2

for (const p of produits) {              // a NodeList is iterated with for...of
  console.log(p.textContent);
}
produits.forEach(p => console.log(p.dataset.id));  // or forEach

// to use map/filter, convert to a real array
const ids = [...produits].map(p => p.dataset.id);  // ["12", "15"]

The NodeList returned by querySelectorAll is static: it doesn’t update if elements are added afterwards. You have to select again.

document.getElementById("panier") is still common for an id (without the #). The older getElementsByClassName methods return “live” collections with more surprising behavior: prefer querySelectorAll.

Searching inside an element and navigating

const premier = document.querySelector(".produit");
premier.querySelector(".prix");     // searches only inside this li

premier.parentElement;              // the <ul>
premier.children;                   // its child elements
premier.nextElementSibling;         // the next li
premier.closest("ul");              // the nearest matching ancestor (or itself)
premier.matches(".produit");        // true: does the element match the selector?

closest will be very useful for events, in the lesson on delegation.

Planning for absence

const banniere = document.querySelector(".banniere-promo");
if (banniere) {
  banniere.hidden = false;
}
// or with optional chaining for a read:
const texte = document.querySelector(".slogan")?.textContent ?? "";

Calling a method on null causes the classic error Cannot read properties of null. If you see it, check your selector (typo, forgotten dot before a class) and the script’s loading time.

Testing in the console

Open the browser console on any page and type document.querySelectorAll("a").length: you have just queried the DOM. It is the best playground for experimenting.