Accessing HTML elements

Learning Competencies

By the end of this section, you should be familiar with and able to:

Explain how to access and manipulate HTML elements using the DOM

Time Box

Activity	Time
Accessing HTML elements	30 minutes

Accessing HTML elements

So, how can we get hold of an HTML element on the page to manipulate it in our code?

The three most common things to query by are:

by tag name (element name, such as 'p' or 'div')
by class name (class attribute e.g. class="container")
by id (id attribute e.g. id="logo")

The first two return a list of elements (technically, it's a nodelist which looks like an array but behaves slightly differently) because there can be more than one p element or more than one element with class="form-group". But when we find an element by its id, we get back a single element (node) because id attribute values must be unique on a page.

One good way to make things easy to grab is by giving them unique ids. We don't want to use those ids for CSS. For CSS, because of specificity, we should generally use classes. But with scripts, it's just the reverse. Finding an element by id is much faster than finding a list of elements by tag name or class name and then having to loop through them to find the one we really want.

Of course, if you want to manipulate multiple elements on a page, then giving them all the same class and finding them by that class is the best way. So think about what you're trying to do, and you'll quickly see which approach is best for that specific circumstance.

Playing along at home

For the rest of the DOM lesson we will be playing around with some commands in the Chrome DevTools. Everything we talk about will be shown in screenshots, but if you'd like to code along with us, make a new file on your computer and call it something like 'domLesson.html', then paste the below code into it, save it, and open it in your browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
  </head>
  <body>
    <div id="app">
      <header>
        <h1>My test page</h1>
      </header>
      <main>
        <p>
          That said, if you just can't help yourself, there's a
          <a id="w3schools-tutorial" href="http://www.w3schools.com/js/js_htmldom.asp">
            W3Schools HTML DOM tutorial
          </a>
          you can check out.
        </p>
        <p>
          Be aware, however, that the
          <span class="dom">HTML DOM</span>
          is not the only document object model out there, so make sure it's the
          <span class="dom">HTML DOM</span>
          that you're
          <a href="http://bit.ly/1MEVufu">looking for</a>.
        </p>
      </main>
  </body>
</html>

OK, so let's say we want to get hold of that <h1> element. How can we do it?

Well, we can use the document.querySelector() method. We can use the element name to do so, so we'll grab it with document.querySelector('h1'). Give it a try, and it should look like the screenshot below.

using querySelector('h1') — **Figure 3:** Using 'querySelector('h1')'.

What if we want to grab our paragraphs. Let's try document.querySelector('p'). And it works, too, but wait a minute! I only see one paragraph here. Where's the other one?

using querySelector('p') — **Figure 4:** Using 'querySelector('p')'.

Well, the querySelector method returns only the first matching element. If we want to return a list of all matching elements, we have to use the querySelectorAll method.

**Figure 5:** Using 'querySelectorAll('p')'.

We can also find elements by class name and by ID using . and #, respectively (just like with CSS), or by combining these methods, for example:

If we wanted to find the first element with the 'w3schools-tutorial' id we would use: document.querySelector('#w3schools-tutorial')

If we wanted to find the first <a> element with the 'w3schools-tutorial' id we would use: document.querySelector('a#w3schools-tutorial')
See the difference? We've got an 'a' in front of the '#' to indicate that we only care about <a> elements.

If we wanted a list of all elements with the 'dom' class we would use: document.querySelectorAll('.dom')

Break time

OK, that's enough for this section. You've learned some very powerful tools! Post questions or blocks on Discord so your cohort and online community can help you. Continue onto the next block when you feel ready to.

Intro to the DOM

Using HTML elements