DOM & Browser

getElementById matches one element by its id attribute and returns that element or null. querySelector takes any CSS selector and returns the first match, or null. querySelectorAll returns a static NodeList of every match (empty if none). The CSS-selector methods are more flexible but slower than the id lookup.

An event travels in three phases: capturing goes down from window through the ancestors to the target, the target phase fires on the element itself, then bubbling goes back up through the ancestors. Handlers run in the bubbling phase by default; passing true (or {capture: true}) to addEventListener makes one run during capturing instead. Bubbling lets a parent react to events on its descendants.

An attribute is the string written in the HTML source; getAttribute('value') returns that initial markup text. A property is the live value on the DOM object, so input.value reflects what the user has typed and updates as they type. The two sync only at parse time for most attributes; afterward changing the property leaves the attribute frozen at its original markup. Names also differ — the class attribute maps to the className property.

addEventListener(type, handler) attaches a callback for an event type without overwriting existing ones, so a target can hold many handlers. When the event fires, the browser calls each handler with an Event object describing it — type, target (where it originated), currentTarget, plus type-specific data like key or coordinates. removeEventListener detaches a handler given the same reference.

textContent reads or writes an element's plain text, treating tags literally. innerHTML reads or replaces its markup, parsing the string as HTML. style sets inline CSS per property (el.style.fontSize). setAttribute/getAttribute work on HTML attributes, while classList adds, removes, or toggles individual CSS classes without clobbering the rest. Prefer textContent over innerHTML for untrusted text to avoid injection.

Event delegation attaches one listener to a common ancestor and relies on bubbling to handle events from many descendants, instead of binding each child. Inside the handler, event.target is the element that actually triggered the event, while event.currentTarget is the element the listener is bound to. You inspect target (often via closest) to decide which child was acted on, including ones added later.

You define a class extending HTMLElement and register it with customElements.define('my-tag', MyClass); the name must contain a hyphen. Lifecycle callbacks run automatically: connectedCallback when it enters the DOM, disconnectedCallback when removed, and attributeChangedCallback when an observed attribute changes. attachShadow({ mode: 'open' }) gives the element an encapsulated shadow tree whose markup and styles are scoped, isolated from the surrounding document.

preventDefault cancels the default action but does not stop the event travelling. stopPropagation halts further capturing or bubbling to other elements, yet still runs the current element's other handlers; stopImmediatePropagation also skips those remaining handlers. A passive listener promises not to call preventDefault, letting the browser scroll without waiting. In an inline HTML handler, return false does both prevent-default and stop-propagation.