HTML and CSS Reference
In-Depth Information
</p>
<p>
<label for="email">Email</label>
<input type="email" id="email" name="email">
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
</section>
</body>
</html>
Load this page in your web browser and launch the developer tools. Not sure how to do this? They usually can be
found in the Tools menu within your browser. Alternatively, take a quick look at Chapter 1, where I cover the most
popular developer tools. Once you have them open, you need to launch the console view. In Chrome, this is done by
selecting the Console tab.
Good to go? Awesome.
getElementById()
The first selector function that you are going to look at is
getElementById()
(note the lowercase d in Id). This
function takes the ID of your element and will return that element's object in the DOM. You call this function on the
document
object.
Let's use this function to select the
<section>
element with the ID
text
. In your console, type the following and
then press Enter:
document.getElementById(“text");
Figure 10-2 shows what should be displayed in your console window.
Figure 10-2
Selecting an element getElementById().
Executing this function will return the target element and all its child elements.
getElementsByClassName()
