Select Page Elements By Class Or Tag

Selecting Multiple Elements At Once

As I'm sure you remember from learning both HTML structure and CSS styling, an ID should beunique- meaning two or more elements should never have the same ID. Since IDs are unique, and since there will be only one element in the HTML with that ID,document.getElementById()will only ever return at most one element. So how would we select multiple DOM elements?

The next two DOM methods that we'll be looking at that both return multiple elements are:

  • .getElementsByClassName()
  • .getElementsByTagName()

Accessing Elements By Their Class

The first method we'll look at is.getElementsByClassName():

document.getElementsByClassName();

Similarly to.getElementById(), if we ran the code above in the console, we wouldn't get anything, because we did not tell it the class to search for! Also just like.getElementById(),.getElementsByClassName()is expecting that we call it with a string of the class we want it to search for/return:

document.getElementsByClassName('brand-color');

If you'd like to read more about this method, check out its documentation page on MDN:https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Let's use this MDN documentation page to try out using this method.

Beware of the S!

I know we haven't looked at.getElementsByTagName()just yet, but there's something different about.getElementById()compared with both.getElementByClassName()and.getElementsByTagName()that I want to point out because it can be easy to miss; both.getElementsByClassName()and.getElementsByTagName()have an extra "s" in their name.

The method's name is.getElementsByClassName(), not.getElementByClassName(). Notice the word right in the middle, it's "Elements" not "Element". If you think about it, this actually makes a lot of sense! Since both.getElementsByClassName()and.getElementsByTagName()could return multiple items, their method names tell us that directly. Now compare this with.getElementById()that will only ever return at most_one_element. Its name has the singular "Element" in it.

I just wanted to point this out because I've been bitten by that missing "s" many-a-time when running code like:

document.getElementByClassName('highlight-spanned');

This code above will_not_work, because there is no DOM method.getElementByClassName()(with singular "Element").

Accessing Elements By Their Tag

After looking at both.getElementById()and.getElementsByClassName(), the new.getElementsByTagName()method should seem quite easy on the eyes:

document.getElementsByTagName('p');

Let's use this MDN documentation page to try out using this method:https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

QUESTION 1 OF 3

Which of the following would correctly select all elements with class:'splort'?

  • document.getElementsByClassName('splort');

  • document.getElementsByClassname('splort');

  • document.getElementsByClassName('.splort');

  • document.getElementByClassName('splort');

SUBMIT

Write the DOM code to select all<article>elements.

SUBMIT

Write the DOM code to select all elements with class:fancy-footer.

SUBMIT

What's Returned?

We just saw that.getElementsByClassName()returns an array-like data structure of elements. But what exactly_is_an element?

In the next section, we'll take the plunge and look at Elements and Nodes.

Selecting Multiple Elements At Once Recap

In this section, we learned two ways to select multiple DOM elements:

  • .getElementsByClassName()
  • .getElementsByTagName()

There are a few important things to keep in mind about these two methods:

  • both methods use the document object
  • both return multiple items
  • the list that's returned is not an array
// select all elements that have the class "accent-color"
document.getElementsByClassName('accent-color');

// select all "span" elements
document.getElementsByTagName('span');

Further Research

results matching ""

    No results matching ""