DOM & Events

Browser APIs for locating elements before reading or changing them.

Term / Syntax	Name	Description	Example
document.querySelector()	First CSS Match	Returns the first element matching a CSS selector.	const button = document.querySelector(".save-button");
document.querySelectorAll()	All CSS Matches	Returns a static NodeList of matching elements.	const cards = document.querySelectorAll(".card");
document.getElementById()	Element By ID	Returns the element with a matching id.	const main = document.getElementById("main-content");
.closest()	Closest Ancestor	Finds the nearest matching element, including the element itself or one of its ancestors.	event.target.closest("[data-action]")
.matches()	Selector Test	Checks whether an element matches a CSS selector.	element.matches(".active")

Properties and methods for changing content, classes, and attributes.

Term / Syntax	Name	Description	Example
.textContent	Text Content	Reads or replaces an element's text.	status.textContent = "Saved";
.innerHTML	HTML Content	Reads or replaces parsed HTML; use carefully with untrusted input.	container.innerHTML = "<strong>Ready</strong>";
.classList.add()	Add Class	Adds one or more CSS classes.	card.classList.add("is-active");
.classList.toggle()	Toggle Class	Adds a class if it is absent or removes it if it is present.	menu.classList.toggle("is-open");
.setAttribute()	Set Attribute	Creates or updates an HTML attribute.	button.setAttribute("aria-expanded", "true");
.dataset	Data Attributes	Reads or writes an element's data-* attributes.	const id = button.dataset.itemId;

Methods for constructing and changing document structure.

Term / Syntax	Name	Description	Example
document.createElement()	Create Element	Creates a new element without inserting it yet.	const li = document.createElement("li");
.append()	Append Nodes	Adds nodes or strings at the end of an element.	list.append(li);
.prepend()	Prepend Nodes	Adds nodes or strings at the beginning of an element.	list.prepend(li);
.before()	Insert Before	Inserts nodes or strings before an element.	card.before(message);
.remove()	Remove Element	Removes an element from the document.	notification.remove();
document.createDocumentFragment()	Batch DOM Updates	Temporarily groups nodes before inserting them together.	const fragment = document.createDocumentFragment();

APIs for responding to user interaction and browser activity.

Term / Syntax	Name	Description	Example
.addEventListener()	Event Listener	Runs a callback when the requested event occurs.	button.addEventListener("click", handleClick);
event.target	Event Origin	References the element that originally triggered the event.	const clicked = event.target;
event.currentTarget	Listener Element	References the element whose listener is currently running.	const button = event.currentTarget;
event.preventDefault()	Prevent Default	Prevents the browser's default action for an event.	event.preventDefault();
event.stopPropagation()	Stop Propagation	Stops an event from continuing through the event path.	event.stopPropagation();
event delegation	Parent Listener Pattern	Handles many child interactions from one stable ancestor.	list.addEventListener("click", event => { const button = event.target.closest("button"); if (button) handleClick(button); });

Common events and values used with interactive form controls.

Term / Syntax	Name	Description	Example
input	Live Input Event	Fires when a control's value changes through user input.	search.addEventListener("input", filterResults);
change	Committed Change	Fires when a value is committed, depending on the control.	select.addEventListener("change", updateView);
submit	Form Submission	Fires on the form when submission is requested.	form.addEventListener("submit", handleSubmit);
FormData	Form Value Collection	Collects a form's submitted values into key/value pairs.	const data = new FormData(form);
.value	Control Value	Reads or sets the current value of many form controls.	const email = emailInput.value.trim();