DOM State

Query Selector Text

A status element starts in a waiting state before querySelector, textContent, and classList update the rendered page.

Program

Client-side JavaScript can read the DOM, keep a reference to an element, and then mutate what the browser renders.

query_selector_text.html
Visuals: captured from real browser rendering
<style>.ready { background: #dcfce7; border-color: #16a34a; color: #14532d; }</style>
<div id="status" class="panel">Waiting for sync</div>
<script>
  const status = document.querySelector("#status");
  status.textContent = "Ready to publish";
  status.classList.add("ready");
</script>

  1. Find the status element.

    The waiting status panel is selected but unchanged.
    querySelector returns the element so later statements can mutate it.

  2. Replace the visible text.

    The panel text changes to Ready to publish.
    textContent mutates the rendered text node.

  3. Add the ready class.

    The panel turns green to show the ready state.
    Adding a class lets CSS handle the visual state.
querySelector querySelector returns the first element that matches a CSS selector.
textContent textContent replaces the text inside an element.