Chapter 3. DOM Manipulation and Event Handling

Every time you view a web page in your browser, a tree-like structure representing the page and all of its elements is created. This is the Document Object Model (DOM), and it provides an API that you can use to obtain, add, modify, or remove almost any part of the web page, and without which modern web design as we know it would not exist. The YUI makes accessing and working with the DOM much easier, and allows you to perform a variety of common DOM scripting tasks with ease.

An integral part of any web application is the ability to react to different events that occur upon the different elements found on your pages. Browsers have had their own event models for some time now, allowing you to easily add code that handles something being clicked on for example, or something being hovered over. The YUI takes this one step further, replacing the existing browser event model with its own, which is more powerful, yet easier to use.

In this chapter, we're going to cover these topics:

• Some of the issues surrounding the use of the native DOM API and how the YUI helps us overcome some problems and extend it
• How the Selector Utility extends our ability to select DOM elements in the page by using standard CSS selectors
• The different ways in which browsers respond to and report events and how the YUI standardizes it into a single mechanism
• The Element Utility that simplifies the creation of complex UI controls by abstracting the functionality of a DOM element

We're also going to get stuck into some more coding examples where you'll get to work with these fundamentally useful library components directly.