Hands On: Changing the DOM
Explore how to interact with and modify the Document Object Model to create dynamic web pages. Learn to add visual markers to headings and attach event handlers that respond to user clicks, enhancing page interactivity and responsiveness.
We'll cover the following...
We'll cover the following...
The previous exercise did not carry out any useful activity that gets us closer to the page functionality; it only demonstrated that you can easily query the DOM. To achieve our goal, we need to extend the current document with plus and minus signs that indicate the state of a heading (collapsed, or expanded, respectively). The markup of the first header looks like this:
Instead, ...