HTML and CSS Reference
In-Depth Information
Selecting Page Elements
In this section, you discover how to select elements in the DOM using JavaScript. You can use a number of different
functions to select elements. Here you are going to look at the four main ones. You use what you learn here in
Chapter 11 when building custom playback controls for a video, and in Chapter 12 when you store data entered into
a web form.
Up to now, you haven't made much use the developer tools that you installed at the beginning of the topic. That's go-
ing to change. You could do this work in JavaScript files, as you have done up to now, but I want you to get used to
using the JavaScript console that comes with your developer tools. The skills that you learn here will be very useful
when it comes to debugging your JavaScript programs in the future.
Debugging
refers to the process of examining your code to find and correct errors (or
bugs
) that are causing your
program to behave in a way that it was not intended to.
The following examples use the developer tools supplied with Google Chrome, but feel free to use other tools if you
are more familiar with them.
Before starting, you need to set up a test page from which you can select elements. Create a new file using the fol-
lowing code, or alternatively you can use the
example10-9.html
, which can be found in the Chapter 10 folder
of the downloadable code resources.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Selectors Test Page</title>
</head>
<body>
<header>
<h1>This is a test page</h1>
</header>
<section id="text">
<h1>A Text Section</h1>
<p id="firstParagraph" class="paragraph">
This text is within the first paragraph element.
</p>
<p class="paragraph">
This text is in the second p element.
</p>
</section>
<section id="form">
<h1>A Web Form</h1>
<form id="webForm" action="#" method="post">
<p>
<label for="name">Name</label>
<input type="text" id="name" name="name">
