Summary

In this chapter, we really took our web skills to the next level. Manipulating the DOM allows all kinds of interactions with the web page, meaning that the web page is no longer a static event.

We started off by explaining the dynamic web and how to traverse the DOM. After having walked over the elements manually, we learned that there's an easier way to select elements in the DOM with the getElementBy…() and the querySelector() methods. After having selected them, we had the power to modify them, add new elements to them, and do all sorts of things using the elements we selected. We started with some more basic HTML handlers, and we could assign a function to, for example, the onclick attribute of the HTML element.

We also accessed the clicked element using the this argument that was sent in as a parameter, and we could modify it in different ways, for example, by changing the style property. We also saw how to add classes to an element, create new...