The secret to getting your web pages to do your bidding with code is to use JavaScript to manipulate the Document Object Model, or DOM. The DOM is an upside-down tree-like structure that the browser uses to represent your web page internally, and it’s by getting and setting values in the DOM that you can modify your web page in response to users doing things like clicking a button, moving the mouse, or dragging an element around.
Getting started with the DOM is easy once you understand how the browser translates your HTML into this internal structure made of objects. Once these objects are created, then you can manipulate them using a wide variety of properties and methods, to change the content of an element, to add a style to an element, or even remove an element from the page completely.
To begin your mastery of the DOM, check out this installment of Head First JavaScript Programming Teasers, and learn how your HTML is translated by the browser into the DOM, what kinds of objects you’ll find in the DOM, and why good HTML structure is a key ingredient to creating a good DOM.