50 experiments.
A whole new view.

<h1 id="welcome">Hello, explorer</h1>

document.querySelector('#welcome').textContent = 'Hello, DOM!';

The live document in the browser

<p id="line">Hello <strong>world</strong></p><output id="result"></output>

document.querySelector('#result').textContent = document.querySelector('#line').childNodes[0].nodeType;

childNodes

<p id="status">Waiting</p>

const status = document.getElementById('status');
status.textContent = 'Ready';

The id without a # prefix

<p id="status">Not initialized</p>

function init() { document.querySelector('#status').textContent = 'Initialized'; }
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
else init();

DOMContentLoaded may already have happened

<output id="result"></output>

const optional = document.querySelector('#optional');
document.querySelector('#result').textContent = optional ? optional.textContent : 'No optional panel';

null

<article class="card">Basic</article><article class="card featured">Special</article>

document.querySelector('.card.featured').textContent = 'Featured pick';

One element with both classes

<ul><li class="item">One</li><li class="item">Two</li><li class="item">Three</li></ul>

document.querySelectorAll('.item').forEach(item => item.classList.add('ready'));

Iterate over the returned elements

<section id="left"><span class="count">0</span></section><section id="right"><span class="count">0</span></section>

const panel = document.querySelector('#right');
panel.querySelector('.count').textContent = '5';

It limits changes to that component

<ul id="list"><li id="first">A</li><li>B</li></ul>

document.querySelector('#first').nextElementSibling.textContent = 'Next';

nextElementSibling

<div id="items"><span class="item">A</span></div><output id="result"></output>

const before = document.querySelectorAll('.item');
const item = document.createElement('span'); item.className = 'item'; item.textContent = 'B';
document.querySelector('#items').append(item);
document.querySelector('#result').textContent = before.length + '/' + document.querySelectorAll('.item').length;

No, it is static

<p id="message"></p>

document.querySelector('#message').textContent = '<strong>Hello</strong>';

textContent

<a id="guide" href="#old">Old guide</a>

const link = document.querySelector('#guide');
link.setAttribute('href', '#learn');
link.textContent = 'Start learning';

null

<article id="card" class="card muted">Status card</article>

const card = document.querySelector('#card');
card.classList.remove('muted');
card.classList.add('highlight');

classList.add

<article id="product" data-price="12" data-quantity="3">Notebook</article><output id="total"></output>

const product = document.querySelector('#product');
document.querySelector('#total').textContent = Number(product.dataset.price) * Number(product.dataset.quantity);

String

<label><input id="agree" type="checkbox"> Agree</label><button id="continue" disabled>Continue</button>

document.querySelector('#agree').checked = true;
document.querySelector('#continue').disabled = false;

No, the Boolean attribute is still present

<ul id="list"></ul>

const item = document.createElement('li');
item.textContent = 'Learn DOM';
document.querySelector('#list').append(item);

When inserted into the document

<ol id="steps"><li>Build</li><li>Test</li></ol>

const item = document.createElement('li'); item.textContent = 'Plan';
document.querySelector('#steps').prepend(item);

prepend

<ul><li id="keep">Keep</li><li id="remove">Remove me</li></ul>

document.querySelector('#remove').remove();

That element from its parent

<template id="cardTemplate"><article class="card"><h2></h2><p></p></article></template><div id="cards"></div>

const copy = document.querySelector('#cardTemplate').content.cloneNode(true);
copy.querySelector('h2').textContent = 'DOM explorer';
copy.querySelector('p').textContent = 'Ready to build';
document.querySelector('#cards').append(copy);

The node and its descendants

<ul id="list"><li>Old placeholder</li></ul>

const fragment = document.createDocumentFragment();
['Plan', 'Build', 'Test'].forEach(text => { const li = document.createElement('li'); li.textContent = text; fragment.append(li); });
document.querySelector('#list').replaceChildren(fragment);

Its children move into the destination

<button id="button">Say hello</button><p id="message">Waiting</p>

document.querySelector('#button').addEventListener('click', () => { document.querySelector('#message').textContent = 'Hello!'; });

A function to run later

<button id="increment">Add one</button><output id="count">0</output>

let count = 0;
document.querySelector('#increment').addEventListener('click', () => { count += 1; document.querySelector('#count').textContent = count; });

It separates the value from its text presentation

<button id="button"><span id="label">Click nested label</span></button><output id="result"></output>

document.querySelector('#button').addEventListener('click', event => { document.querySelector('#result').textContent = event.target.id + '/' + event.currentTarget.id; });

The button

<div id="outer"><button id="inner">Click</button></div><output id="trace"></output>

const trace = document.querySelector('#trace');
document.querySelector('#inner').addEventListener('click', () => trace.textContent += 'inner ');
document.querySelector('#outer').addEventListener('click', () => trace.textContent += 'outer');

No, it cancels a default action

<ul id="tasks"><li>Read <button data-remove><span>Delete</span></button></li><li>Build <button data-remove>Delete</button></li></ul>

const list = document.querySelector('#tasks');
list.addEventListener('click', event => { const button = event.target.closest('[data-remove]'); if (button && list.contains(button)) button.closest('li').remove(); });

The parent listener can handle later children

<label>Name <input id="name"></label><p id="greeting">Hello, friend</p>

document.querySelector('#name').addEventListener('input', event => { document.querySelector('#greeting').textContent = 'Hello, ' + (event.target.value.trim() || 'friend'); });

The value property

<form id="form"><label>Topic <input id="topic" name="topic"></label><button>Save topic</button></form><p id="status"></p>

document.querySelector('#form').addEventListener('submit', event => { event.preventDefault(); document.querySelector('#status').textContent = 'Saved: ' + document.querySelector('#topic').value; });

It represents the form action, including keyboard submission

<form id="form"><label>Title <input name="title" value="DOM"></label><label>Level <select name="level"><option>Beginner</option><option>Intermediate</option></select></label></form><output id="summary"></output>

const data = new FormData(document.querySelector('#form'));
document.querySelector('#summary').textContent = data.get('title') + ' / ' + data.get('level');

name

<form id="form"><label>Task <input id="task" aria-describedby="error"></label><button>Save</button></form><p id="error" role="status"></p>

document.querySelector('#form').addEventListener('submit', event => { event.preventDefault(); const field = document.querySelector('#task'); const invalid = !field.value.trim(); field.setAttribute('aria-invalid', String(invalid)); document.querySelector('#error').textContent = invalid ? 'Enter a task title' : 'Saved'; });

No, the server must validate independently

<label>Theme <select id="theme"><option value="light">Light</option><option value="night">Night</option></select></label><article id="card" data-theme="light">Preview</article>

const select = document.querySelector('#theme');
function render() { document.querySelector('#card').dataset.theme = select.value; }
select.addEventListener('change', render); render();

So initial output matches initial state

<button id="toggle" aria-expanded="false" aria-controls="panel">Show details</button><section id="panel" hidden>Helpful details</section>

const button = document.querySelector('#toggle'); const panel = document.querySelector('#panel');
button.addEventListener('click', () => { panel.hidden = !panel.hidden; button.setAttribute('aria-expanded', String(!panel.hidden)); });

Whether the controlled content is expanded

<button id="open">Open search</button><div id="panel" hidden><label>Search <input id="search"></label></div>

document.querySelector('#open').addEventListener('click', () => { document.querySelector('#panel').hidden = false; document.querySelector('#search').focus(); });

After the user explicitly opens search

<button id="open">Open panel</button><section id="panel"><label>Note <input id="note"></label></section>

document.addEventListener('keydown', event => { if (event.key === 'Escape') { document.querySelector('#panel').hidden = true; document.querySelector('#open').focus(); } });

event.key

<button id="save">Save draft</button><p id="status" role="status"></p>

document.querySelector('#save').addEventListener('click', () => { document.querySelector('#status').textContent = 'Draft saved locally'; });

No, manual testing is still needed

<button id="open">Open help</button><dialog id="help" aria-labelledby="helpTitle"><h2 id="helpTitle">Help</h2><p>Try one step at a time.</p><button id="close">Close</button></dialog>

const dialog = document.querySelector('#help');
document.querySelector('#open').addEventListener('click', () => dialog.showModal());
document.querySelector('#close').addEventListener('click', () => dialog.close());

showModal()

<ul id="list"></ul>

const names = ['Ada', 'Grace', 'Linus'];
function render() { document.querySelector('#list').replaceChildren(...names.map(name => { const li = document.createElement('li'); li.textContent = name; return li; })); }
render();

It avoids accumulating duplicate rows

<label>Search names <input id="search"></label><ul id="list"></ul><p id="empty" hidden>No matches</p>

const names = ['Ada', 'Grace', 'Linus'];
function render() { const term = document.querySelector('#search').value.trim().toLowerCase(); const visible = names.filter(name => name.toLowerCase().includes(term)); document.querySelector('#list').replaceChildren(...visible.map(name => { const li = document.createElement('li'); li.textContent = name; return li; })); document.querySelector('#empty').hidden = visible.length > 0; }
document.querySelector('#search').addEventListener('input', render); render();

No, derive a visible subset

<ul id="list"><li data-id="a">Read <button data-delete><span>Delete</span></button></li><li data-id="b">Build <button data-delete>Delete</button></li></ul>

document.querySelector('#list').addEventListener('click', event => { const button = event.target.closest('[data-delete]'); if (!button) return; const row = button.closest('[data-id]'); const id = row.dataset.id; document.querySelectorAll('#list [data-id]').forEach(item => { if (item.dataset.id === id) item.remove(); }); });

Filtering and sorting can change positions

<fieldset id="choices"><legend>Skills</legend><label><input type="checkbox"> Select</label><label><input type="checkbox"> Create</label><label><input type="checkbox"> Listen</label></fieldset><output id="count">0</output>

function render() { document.querySelector('#count').textContent = document.querySelectorAll('#choices input:checked').length; }
document.querySelector('#choices').addEventListener('change', render); render();

It avoids keeping two values synchronized manually

<ul id="list"><li>Draft <button id="delete">Delete</button></li></ul><p id="empty" hidden>No tasks yet. Add your first task.</p>

function renderEmpty() { document.querySelector('#empty').hidden = document.querySelector('#list').children.length > 0; }
document.querySelector('#delete').addEventListener('click', event => { event.currentTarget.closest('li').remove(); renderEmpty(); }); renderEmpty();

At initialization and after relevant changes

<button id="ping">Ping</button><button id="stop">Stop listening</button><output id="count">0</output>

let count = 0; const ping = document.querySelector('#ping');
function handle() { document.querySelector('#count').textContent = ++count; }
ping.addEventListener('click', handle);
document.querySelector('#stop').addEventListener('click', () => ping.removeEventListener('click', handle));

The same handler function reference

<button id="claim">Claim demo badge</button><output id="count">0</output>

let count = 0;
document.querySelector('#claim').addEventListener('click', () => { document.querySelector('#count').textContent = ++count; }, { once: true });

Removes the listener after its first invocation

<ul id="list"></ul><output id="count">0</output>

const list = document.querySelector('#list');
const observer = new MutationObserver(() => { document.querySelector('#count').textContent = list.children.length; });
observer.observe(list, { childList: true });

After the current synchronous work

<div id="box" class="card">Ready for a visual update</div>

requestAnimationFrame(() => { document.querySelector('#box').classList.add('highlight'); });

No, timing depends on the browser and display

<section id="board"><button id="award">Award points</button><output id="score">0</output></section>

document.querySelector('#board').addEventListener('scorechange', event => { document.querySelector('#score').textContent = event.detail.score; });
document.querySelector('#award').addEventListener('click', event => { event.currentTarget.dispatchEvent(new CustomEvent('scorechange', { bubbles: true, detail: { score: 10 } })); });

detail

<div id="faq"><button data-panel="a" aria-controls="a" aria-expanded="false">What is the DOM?</button><p id="a" hidden>A live document tree.</p><button data-panel="b" aria-controls="b" aria-expanded="false">How do I practice?</button><p id="b" hidden>Build one small interaction.</p></div>

document.querySelector('#faq').addEventListener('click', event => { const button = event.target.closest('button[data-panel]'); if (!button) return; const panel = document.getElementById(button.dataset.panel); panel.hidden = !panel.hidden; button.setAttribute('aria-expanded', String(!panel.hidden)); });

Its own panel and expanded state

<label>Short note <textarea id="note"></textarea></label><output id="count">0 / 20</output><p id="warning" hidden>Over the practice limit</p>

function render() { const length = document.querySelector('#note').value.length; document.querySelector('#count').textContent = length + ' / 20'; document.querySelector('#warning').hidden = length <= 20; }
document.querySelector('#note').addEventListener('input', render); render();

UTF-16 code units

<label>Sort <select id="sort"><option value="title">Title</option><option value="minutes">Minutes</option></select></label><ul id="cards"></ul>

const lessons = [{title:'Events',minutes:15},{title:'DOM',minutes:10},{title:'Forms',minutes:5}];
function render() { const key = document.querySelector('#sort').value; const sorted = [...lessons].sort((a,b) => key === 'title' ? a.title.localeCompare(b.title) : a.minutes-b.minutes); document.querySelector('#cards').replaceChildren(...sorted.map(item => { const li=document.createElement('li'); li.textContent=item.title+' · '+item.minutes+' min'; return li; })); }
document.querySelector('#sort').addEventListener('change',render);render();

Yes; copy first when preserving original order matters

<form id="form"><label>Task <input id="title"></label><button>Add task</button></form><p id="status" role="status"></p><ul id="tasks"></ul>

const list=document.querySelector('#tasks');
document.querySelector('#form').addEventListener('submit', event => { event.preventDefault(); const field=document.querySelector('#title'); const title=field.value.trim(); if(!title){document.querySelector('#status').textContent='Enter a task';return;} const li=document.createElement('li'); const label=document.createElement('span');label.textContent=title;const button=document.createElement('button');button.textContent='Delete';li.append(label,button);list.append(li);field.value='';document.querySelector('#status').textContent='Task added'; });
list.addEventListener('click',event=>{const button=event.target.closest('button');if(button)button.closest('li').remove();});

A persistence design and its error handling

<label>Find a resource <input id="search"></label><ul id="resources"></ul><p id="status" role="status"></p>

const resources=[{id:'dom',title:'DOM basics'},{id:'events',title:'Event patterns'},{id:'forms',title:'Form design'}];
const saved=new Set();const list=document.querySelector('#resources');
function render(){const term=document.querySelector('#search').value.toLowerCase().trim();list.replaceChildren(...resources.filter(item=>item.title.toLowerCase().includes(term)).map(item=>{const li=document.createElement('li');const label=document.createElement('span');label.textContent=item.title;const button=document.createElement('button');button.dataset.id=item.id;button.textContent=saved.has(item.id)?'Saved':'Save';button.setAttribute('aria-pressed',String(saved.has(item.id)));li.append(label,button);return li;}));}
document.querySelector('#search').addEventListener('input',render);
list.addEventListener('click',event=>{const button=event.target.closest('button[data-id]');if(!button)return;const id=button.dataset.id;if(saved.has(id))saved.delete(id);else saved.add(id);document.querySelector('#status').textContent=saved.has(id)?'Resource saved':'Resource removed';render();});render();

An item keeps its identity across different views