HTML and CSS Reference
In-Depth Information
Figure 10-4
Selecting Elements Using getElementsByTagName().
getElementsByName()
Remember those
name
attributes that you were specifying on form fields? You can also select elements based on
those. The
getElementsByName()
function takes in a
name
and returns an array of all the elements that have
that
name
.
Try selecting the e-mail field using
getElementsByName()
:
document.getElementsByName(“email");
This should return an array with one object, the
<input>
element for the e-mail field, as shown in Figure 10-5.
Figure 10-5
Selecting elements using getElementsByName().
Interacting with Page Elements
Now that you understand how to select elements using JavaScript, let's look at how you can manipulate their content
and attributes.
Manipulating Text Content
First try changing the text of the first
<p>
element. To do this, select the element and update its
innerHTML
prop-
erty to
This text was changed using JavaScript
.
document.getElementById(“firstParagraph").innerHTML = “This text
was changed using JavaScript";
Execute this in your console. You now should see the text on the page change.
