DOM

Summary

The Document Object Model — a tree-structured, JavaScript-accessible representation of the HTML page that lets you read and manipulate content dynamically. DOM manipulation connects JavaScript state to visible browser content and teaches the fundamentals behind many higher-level UI frameworks.

• 1Use `document.querySelector`/`querySelectorAll` to select and modify elements. Verify the behavior with realistic data and handle the failure or empty state as well.
• 2Practice creating, appending and removing DOM nodes with JS. Test it with at least one normal case and one edge case so you can explain the behavior confidently.
• 3Learn the difference between `innerHTML`, `textContent` and `innerText`.