HTML DOM

Reading and changing the document from script.

HTML DOM is taught here in 13 lessons, running from Selecting elements through to Debugging and testing DOM code. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.

Lessons

1. Selecting elementsFind nodes with CSS selectors, understand when you get a static list versus a live collection, and scope a search to one subtree.
2. Reading and updating content safelytextContent versus innerHTML versus form properties, attribute and class handling, and the script-injection bug that comes with the powerful option.
3. Creating, removing and traversingBuild nodes and fragments efficiently, detach and replace them correctly, and walk the tree with the element-only navigation properties.
4. Attributes, classes and inline styles from scriptAttribute versus property, boolean attributes, the dataset naming rules, classList operations, and the difference between inline style and computed style.
5. Events and delegation in depthThe options object, capture and bubble, delegation with closest, removing listeners reliably, and custom events between components.
6. Forms, validation and user inputRead and set values, use the constraint validation API with your own messages, collect data with FormData, and manage focus and selection.
7. Geometry, scrolling and visibilityMeasure elements correctly, understand which size property you want, scroll deliberately, and observe visibility with the observer APIs.
8. Templates, cloning and efficient renderingUse the template element for inert markup, clone it into a fragment, and render lists without rebuilding the whole DOM on every change.
9. Observing changes with MutationObserverWatch for added nodes, attribute changes and text edits, understand the record batching, and avoid the observer loop.
10. Web Components: custom elements and shadow DOMDefine a custom element, use its lifecycle callbacks correctly, encapsulate styles in a shadow root, and compose with slots and events.
11. Performance and memory in DOM codeStop layout thrashing by separating reads from writes, batch with animation frames, and find the listener and node leaks that make a page degrade over time.
12. Accessibility for DOM scriptingManage focus deliberately, keep ARIA state in sync with the DOM, announce changes with live regions, and support the keyboard a custom widget implies.
13. Debugging and testing DOM codeUse DevTools breakpoints and console utilities to inspect live nodes, then test the same code in JSDOM and in a real browser.

More in Front-end Development

HTML CSS JavaScript TypeScript AJAX JSON Tailwind CSS Bootstrap 5 Foundation Vue.js React Next.js Angular jQuery ECharts Chart.js SVG Font Awesome

FAQ