
The DOM (Document Object Model) is the live object representation of the HTML page that the browser builds when it parses HTML. JavaScript reads and mutates that tree to update the UI. This lesson runs in a browser; the earlier lessons run anywhere JavaScript runs.

<ExamplePair>
<ExampleProse>

`document.querySelector` finds the first element that matches a CSS selector. `querySelectorAll` returns a NodeList (not a true Array) of all matching elements. Convert a NodeList to an Array with `Array.from` when you need array methods like `.map` or `.filter`.

</ExampleProse>
<ExampleCode>

```js
// Select a single element
const heading = document.querySelector("h1");
console.log(heading.textContent); // "Hello, world"

// Select multiple elements
const items = document.querySelectorAll("ul li");
console.log(items.length); // 3 (a NodeList)

// Convert to Array to use array methods
const texts = Array.from(items).map((li) => li.textContent);
console.log(texts); // ["Item 1", "Item 2", "Item 3"]
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`textContent` reads or replaces all text inside an element. `classList` lets you add, remove, and toggle CSS classes without touching the full `className` string. `dataset` exposes `data-*` attributes as a plain object.

</ExampleProse>
<ExampleCode>

```js
const card = document.querySelector(".card");

// Read and write text
console.log(card.textContent); // "Original text"
card.textContent = "Updated text";

// Toggle a CSS class
card.classList.add("is-active");
card.classList.remove("is-hidden");
card.classList.toggle("is-highlighted"); // adds if absent, removes if present
console.log(card.classList.contains("is-active")); // true

// Access data attributes (data-user-id="42" in HTML)
console.log(card.dataset.userId); // "42"
card.dataset.userId = "99"; // sets data-user-id="99"
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`document.createElement` creates a new element in memory. `.append` inserts it into the DOM. `.remove` takes an element out. This is the safe way to add dynamic content - unlike `innerHTML`, it never interprets the content as markup.

</ExampleProse>
<ExampleCode>

```js
const list = document.querySelector("ul");

// Create a new list item and insert it
const newItem = document.createElement("li");
newItem.textContent = "New item";  // safe: treated as text, not HTML
list.append(newItem);

// Insert before an existing element
const firstItem = list.querySelector("li");
list.insertBefore(newItem, firstItem);

// Remove an element
firstItem.remove();

// DANGER: innerHTML with user data is XSS
// list.innerHTML = userInput; // never do this
// SAFE alternative:
const safe = document.createElement("li");
safe.textContent = userInput; // treated as plain text
list.append(safe);
```

</ExampleCode>
</ExamplePair>

<InProduction>
`innerHTML` with any user-supplied data is XSS (cross-site scripting) by default. A string like `<img src=x onerror="stealCookies()">` becomes a live script the moment it hits `innerHTML`. Prefer `textContent` for plain text and `createElement` + `append` for structure. In hot loops (like rendering a long list on scroll), cache the node reference outside the loop. `querySelector` runs a full CSS-selector match every call and is not free.
</InProduction>


How JavaScript reads and mutates the live HTML tree - selecting nodes, changing content and classes, and creating elements safely without opening an XSS hole.

DOM Manipulation


Events are how the browser tells your code that something happened: a click, a key press, a form submission, a window resize. You attach a listener function with `addEventListener` and the browser calls it with an `event` object that describes what happened. This lesson runs in a browser; the earlier lessons run anywhere JavaScript runs.

<ExamplePair>
<ExampleProse>

`addEventListener` takes an event name and a handler function. The handler receives an `event` object. `event.target` is the element that was interacted with. `event.preventDefault()` stops the browser's default behavior - useful for links you want to handle in JavaScript without a page navigation.

</ExampleProse>
<ExampleCode>

```js
const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  console.log("clicked:", event.target.textContent);
  // event.target is the element that was clicked
});

// Prevent default behavior (e.g. stop a link from navigating)
const link = document.querySelector("a.ajax-link");
link.addEventListener("click", (event) => {
  event.preventDefault();
  console.log("link click intercepted, no navigation");
  // handle it yourself instead
});
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

The `input` event fires on every keystroke as the user types. The `change` event fires when the element loses focus (blur) after its value changed. Use `input` for live feedback and `change` for "finished editing" behavior.

</ExampleProse>
<ExampleCode>

```js
const field = document.querySelector("input[type='text']");

// Fires on every keystroke
field.addEventListener("input", (event) => {
  console.log("current value:", event.target.value);
});

// Fires once when the field loses focus and the value changed
field.addEventListener("change", (event) => {
  console.log("committed value:", event.target.value);
});
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`AbortController` is the modern way to remove a group of listeners at once. Pass the controller's `signal` to each `addEventListener` call, then call `controller.abort()` to remove them all. This is cleaner than tracking and calling `removeEventListener` for every single handler.

</ExampleProse>
<ExampleCode>

```js
function setupListeners(element) {
  const controller = new AbortController();
  const { signal } = controller;

  element.addEventListener("click", () => {
    console.log("clicked");
  }, { signal });

  element.addEventListener("keydown", (event) => {
    console.log("key pressed:", event.key);
  }, { signal });

  window.addEventListener("resize", () => {
    console.log("window resized");
  }, { signal });

  // Later: remove ALL listeners above with a single call
  function cleanup() {
    controller.abort();
  }

  return cleanup;
}

const removeAll = setupListeners(document.querySelector(".widget"));
// When the component is destroyed:
removeAll();
```

</ExampleCode>
</ExamplePair>

<InProduction>
A forgotten `removeEventListener` keeps the handler closure alive - along with everything the closure captures, including DOM nodes. This is one of the most common memory leak sources in single-page applications. Use an `AbortController` per component or lifecycle scope and call `.abort()` on teardown. The pattern pairs cleanly with framework cleanup hooks (React's `useEffect` return, Vue's `onUnmounted`).
</InProduction>


Attaching listeners, reading the event object, and cleaning up with AbortController to avoid the memory leaks that forgotten removeEventListener leaves behind.

Events


`class` is syntactic sugar over JavaScript's prototype system. Each instance gets methods shared on the prototype, and `this` inside a method refers to whatever object the method was called on - not where the method was defined. That distinction is the source of most class-related bugs.

<ExamplePair>
<ExampleProse>

A class groups related state and behavior. The `constructor` runs when you call `new` and sets up instance properties. Methods are defined in the class body and are available on every instance through the shared prototype.

</ExampleProse>
<ExampleCode>

```js
class Counter {
  constructor(start = 0) {
    this.count = start;
  }

  increment() {
    this.count += 1;
  }

  decrement() {
    this.count -= 1;
  }

  value() {
    return this.count;
  }
}

const c = new Counter();
c.increment();
c.increment();
c.increment();
c.decrement();
console.log(c.value()); // 2

const c2 = new Counter(10);
c2.increment();
console.log(c2.value()); // 11
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

`this` is bound at the call site. Pulling a method off an instance and calling it as a plain function loses the binding. Classes always run in strict mode, so `this` becomes `undefined` (not `window`) and the call throws.

</ExampleProse>
<ExampleCode>

```js
class Counter {
  constructor() {
    this.count = 0;
  }

  increment() {
    this.count += 1; // 'this' depends on how this function is called
  }
}

const c = new Counter();
c.increment();        // works - this === c
console.log(c.count); // 1

// Detach the method from its object
const inc = c.increment;
inc(); // TypeError: Cannot set properties of undefined

// The same problem arises when passing a method as a callback
setTimeout(c.increment, 100); // this is undefined inside increment
```

</ExampleCode>
</ExamplePair>

<ExamplePair>
<ExampleProse>

Three patterns fix the lost binding. Each has a different trade-off: binding in the constructor is compatible everywhere; class-field arrows are the modern default; wrapping at the call site is a one-off fix when you don't control the class.

</ExampleProse>
<ExampleCode>

```js
// Fix 1: bind in the constructor (works in all environments)
class Counter1 {
  constructor() {
    this.count = 0;
    this.increment = this.increment.bind(this);
  }
  increment() { this.count += 1; }
}

// Fix 2: class field arrow (modern - arrow captures this at construction)
class Counter2 {
  count = 0;
  increment = () => { this.count += 1; };
}

// Fix 3: wrap at the call site (one-off, doesn't fix the class itself)
class Counter3 {
  constructor() { this.count = 0; }
  increment() { this.count += 1; }
}

const c1 = new Counter1();
const inc1 = c1.increment;
inc1(); // works
console.log(c1.count); // 1

const c2 = new Counter2();
const inc2 = c2.increment;
inc2(); // works
console.log(c2.count); // 1

const c3 = new Counter3();
setTimeout(() => c3.increment(), 100); // works - arrow at call site
```

</ExampleCode>
</ExamplePair>

<InProduction>
`this` is bound at the call site, not the definition site. The moment a method is passed as a callback the binding is gone. The class-field arrow (`increment = () => { ... }`) is the modern fix and requires no extra thought at every call site. Use `.bind(this)` in the constructor for environments or codebases that avoid class fields. Wrapping in an arrow at the call site patches the symptom without fixing the class.
</InProduction>


The class syntax, prototype-based inheritance under the hood, and the this-rebinding bug that breaks methods the moment they are passed as callbacks.