HTML and CSS Reference
In-Depth Information
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.
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
Usage description
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
element name
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.
Search WWH ::

Custom Search