The Complete JavaScript DOM in two hours

Explore the document object and window object, access tags, attributes, anchors, forms, and events, and inspect domain, title, doctype, head, and body with Chrome developer tools.

Learn to grab elements from the document using getElementById, store them in a variable, and inspect their content with an example element id TSA.

Explore the differences between textContent, innerText, and innerHTML by manipulating a DOM element with getElementById, showing text extraction versus rendered content and simple styling.

Learn to select elements by class name, treat the result as an HTML collection, and loop through it to apply styles to each element.

Learn to select all input elements using get elements by tag name, compare it with get elements by class name, and modify their borders through zero indexing.

Learn how to use querySelector to grab the first element by id, class, or tag using # and . symbols, with practical examples of styling the selected element.

Learn advanced uses of querySelector to grab specific elements, including the last child and nth-child selectors, and target inputs by type like submit.

Learn how querySelectorAll fetches all matching elements as a node list and how to style every even input with a green dashed border using forEach and an arrow function.

Learn dom traversal by moving up and down from a form’s inputs to parents and siblings using querySelector, parentElement, children, firstElementChild, and lastElementChild, with practical hands-on practice.

Learn to dynamically build a DOM by creating elements, setting attributes, adding text nodes, and inserting or appending them before existing nodes, as you build a notes app.

Navigate the dom by selecting a form and using previous and next element siblings to reach the heading and its first child, then modify content.

Learn how events signal user actions, and how to use addEventListener to attach event handlers that run functions when events like click occur, with practical examples.

Learn how the event parameter e drives DOM events: inspect targets, ids, class names, and types, capture click coordinates, and use preventDefault and modifier keys to control actions.