HTML and CSS Reference
appearance, and content. Theoretically, although this is rarely a recommended practice, you
produce the exact same results. Having that power over your webpages is very exciting, even
after they are rendered. You start by selecting items in the DOM to get a reference to them.
Selecting items in the DOM
To manipulate the DOM, you need to know how to access it and to obtain references to the
elements you want to manipulate. In the next section you look at altering the DOM, but first
you need to get elements from the DOM so you can work with them.
THE DOCUMENT OBJECT MODEL AS A FAMILY TREE
The DOM is essentially a collection of nodes arranged in a tree. All the nodes are related
to each other. They are one big happy family of children, siblings, parents, grandparents,
grandchildren, and so on. This essence of a family tree represents the hierarchy of the DOM
and is important to understand as you manipulate the DOM through code.
access DOM elements through a global object provided by the browser, called document , or
through the elements themselves after you obtain a reference to one. Table 1-2 outlines the
core native methods used for selecting elements in the DOM.
TABLE 1-2 Methods available for selecting DOM elements
Gets an individual element on the page by its unique id attribute value
Gets all the elements that have the specified CSS class applied to them
Gets all the elements of the page that have the specified tag name or
Gets the first child element found that matches the provided CSS selector
Gets all the child elements that match the provided CSS selector criteria
For the most part, the methods are straightforward to use. In this section, you begin with
a simple HTML document structure that you will use in many other examples in this topic to
highlight various concepts. Create a webpage with the HTML markup in Listing 1-2 to pro-
ceed with the following examples.