Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 23

appearance, and content. Theoretically, although this is rarely a recommended practice, you
could render a blank HTML page to the browser, build the entire page using JavaScript, and
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.

NOTE 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.

You have a few choices when it comes to using JavaScript to access the DOM. You can
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

Method Usage description

getElementById Gets an individual element on the page by its unique id attribute value

getElementsByClassName Gets all the elements that have the specified CSS class applied to them

getElementsByTagName Gets all the elements of the page that have the specified tag name or

element name

querySelector Gets the first child element found that matches the provided CSS selector

criteria

querySelectorAll 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.