Learn how to:
- Use the developer tools to identify a particular element
- Use JavaScript's selector methods to select particular pieces of the DOM
- Learn about CSS selectors and use them to select elements by id, class or HTML Tag.
For this lesson we want to look a little deeper at how to retrieve information about a webpage by using JavaScript's document object model API. By working with JavaScript's DOM API, we will be able to select and manipulate any content on the browser.
Let's work with the "Ada Lovelace" Wikipedia entry. We have copied the HTML from Wikipedia and simplified it a bit. Open the Ada Lovelace document in a new tab. You'll be moving between that tab as well as this document.
First things first, let's identify the title of the webpage. The title is
usually just the first header in the web page. In HTML, headers are called h1
tags and look like this: <h1>This Is My Title</h1>. In our
Ada Lovelace page, it looks like the title is "Ada
Lovelace".
To set up clarity of the next instructions, let's define some vocabulary. At the moment your browser is presenting information about Ada Lovelace in its content pane. Naturally enough this is where the content is displayed. In this next operation we're going to open up the "Developer Tools." These tools exist in their own pane, the developer tools pane or inspector. The developer pane has multiple headings. That should be enough vocabulary.
- From the browser, right click (or two fingers click) in the "content pane"
- Click on Inspect from the dropdown menu.
- Your developer tools pane may come up on the right or the bottom
- Select the icon two icons to the left of the "Elements" Header. It should look like this:
. This is the "Element Selector." After you click that...
- Click on the "Ada Lovelace" title in the content pane.
- The result of this click should be shown in the developer tools pane. The "Elements" header should be active and the HTML entity for the title should be selected ("highlighted")
- See the
id"attribute" is equal tofirstHeading - Double-click on the
idattribute's value and Chrome will text-select it for you for ease of copy-and-paste. Press ⌘+c on Mac or Ctrl+c on Windows to copy thisidattribute name. This is a very common pattern for developers to use sinceids can be quite nasty to type out.
Aside: You'll notice that this h1 tag has an id attribute the same
content as the class attribute. This is relatively uncommon. An id is
usually obviously unique like mostImportantHeader while class might be a list
of class names like header pretty-purple women-tech-pioneer. We'll focus more
on this later, but don't make the mistake of thinking these two attributes are
required to be the same.
Let's use that captured id attribute value with document.querySelector to
select the correct element from our document. Select the "Console" header
within the developer tools pane and fill in document.querySelector()'s
parentheses with ", #, paste, " so that the full line looks like:
document.querySelector("#firstHeading")You should see returned:
<h1 id="firstHeading" class="firstHeading" lang="en">Ada Lovelace</h1>
Congratulations, you've used the id to find an element on a page with
JavaScript! Let's try a more general application by simply looking up based on
the tag.
Now, from the Console, type in document.querySelector('h1'), and you'll see that this selects the first appropriate element.
document.querySelector('h1')
// <h1 id="firstHeading" class="firstHeading" lang="en">Ada Lovelace</h1>The "tag name" of this element is h1. To select something by the tag name we simply "pass" through the "tag name" to document.querySelector. Be sure to recognize that the document.querySelector method will return the first match. One can easily imagine HTML pages with multiple <p> tags, however. We will cover multiple match scenario in a later lesson, but if you'd like to grow your self-education muscles, search the Web for the MDN documentation on document.querySelectorAll.
Using JavaScript we can "target" elements using the same syntax we "target" element in CSS. You've just used the first occurrence of an HTML tag match to "select" an HTML element. Let's see some other ways to "select" elements. For the moment, we'll step away from the lovelace.html document and look at a simple HTML snippet as a thought experiment. Beneath the snippet, find a table displaying different ways to select the paragraph element.
<div>
<p id="content" class="red"> Select this content!</p>
</div>
<ul>
<li>Don't </li>
<li>Select </li>
<li>This </li>
</ul>| Attribute | CSS Selector | querySelector Code |
|---|---|---|
| id | # |
document.querySelector('#content') |
| class | . |
document.querySelector('.red') |
| html tag | document.querySelector('p') |
So you can see that we prepend the # sign to the id attribute name to select an item by its id. We prepend the . to the class attribute name to select an item by its class name. And we prepend nothing when selecting by tag name.
We can also select elements using other methods. Let's add in those other methods to our chart.
| Attribute | CSS Selector | querySelector Code | Alternative Method |
|---|---|---|---|
| id | # |
document.querySelector('#content') |
document.getElementById('content') |
| class | . |
document.querySelector('.red') |
document.getElementsByClassName('red') |
| html tag | document.querySelector('p') |
document.getElementsByTagName('p') |
Notice that when we use a method like
getElementByIdwe do not need to start with a # sign. This is because JavaScript already knows that we are selecting by theidattribute by virtue of using a method that only accepts an id. Query selectors take different types of attributes, so there we do need to specify the type of attribute we are selecting by.
Let's turn back to our lovelace.html file.
Let's look at some more content: links.
Links are defined in HTML with an a tag. Let's use what we know so far to try to access the link for the word "Marylebone" inside the "info box" or "gray inset" at the right. Inspect this element. You'll see it has no id or class attribute. To select it we can select the infobox and then select a unique span with a class name and then the first link within that span. That is, we will "chain" our calls to document.querySelector. Try this:
document.querySelector(".infobox").querySelector("span.deathplace").querySelector("a")
This code statement should make sense in English if you read it backward:
"Find the link that's within the span element with the class "deathplace" that's within some element with the class "infobox".
It's our opinion that having the mental flexibility to read backward and forward in different made-up languages might be the reason so many programmers are prone to puns, wordplay, and Lewis Carroll books.
Now that we have selected the proper HTML element, let's save it to a variable and examine it "under a microscope."
let maryleboneAnchor = document.querySelector(".infobox").querySelector("span.deathplace").querySelector("a")
maryleboneAnchor.constructor
// ƒ HTMLAnchorElement() { [native code] }By calling the selected element's constructor property, we can see that maryleboneAnchor is an "instance" of an HTMLAnchorElement. Many methods on this instance correspond to the potential attributes of an HTML anchor. For example, maryleboneAnchor.href returns "/wiki/Marylebone", maryleboneAnchor.text returns "Marylebone".
The magic of guessing: Programmers guess a lot more than you might think. The reason why is because the consequences guessing incorrectly are really low, and you can often quickly find out if you are right or wrong. So if you're unsure if some code will work, just guess and try it. The consequence of guessing incorrectly is that you learn something new about the language.
The methods we explored thus far like href and text make a lot of sense when we have an instance of an HTMLAnchorElement. There are other methods you can reliably call on any instance of an element (or any HTML DOM node, to be technical) that you select. We already saw a couple of them when exploring the DOM in previous lessons. These methods can allow us to find information about other related nodes, like children, or nextSibling. Some tell us attributes of element, like attributes to see attributes of the element, classList to see a list of classes associated with the element, and style which returns the associated CSS styles of a selected element. Explore these on the maryleboneAnchor element.
If maryleboneAnchor isn't providing anything interesting, use the "chained" querySelector method to find something more interesting. Don't forget the magic of guessing either, if there's a next.... something there's probably also a previous.... something. If a method doesn't return a String, what does it return? This process of exploration and guess-and-check, optimized for speed, is how programmers avoid having to know books worth of knowledge: they don't memorize all the facts, they ask the computer to teach them micro-lessons.
In this section, we learned how to use JavaScript and our developer console to ask questions about our HTML. Here is our process:
- From the browser, click inspect element on the HTML element you are interested in to find an identifying attribute to select the HTML.
- Depending on the type of attribute, you can then use
document.querySelector()method, and in the parentheses pass through the proper CSS selector in combination with the attribute name to select that element OR we can use a different JavaScript method likedocument.getElementsByClassName()to select the correct element. - Once you have properly targeted the element, you can then call other methods to identify attributes of that element e.g.
document.querySelector('a').text
View Selecting Single Elements Readme on Learn.co and start learning to code for free.