Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript and the DOM

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Select Elements by Class Name

3:48 with Guil Hernandez

When working with HTML, you'll often set class attributes on elements and apply styles to them with CSS. The document object provides a way to select elements in the DOM with a given class name with document.getElementsByClassName().

Exercise

Inside the for...of loop, the variable highlight is assigned a different value. Log the highlight variable to the console to view the collection of returned elements.

for ( const highlight of highlights ) {
  highlight.style.backgroundColor = 'cornsilk';

  console.log(highlight);
}

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Often when working with HTML, you'll set class attributes on elements and 0:00
    apply styles to them with CSS. 0:05
    The document object provides a way for us to select elements in the DOM 0:08
    with a given class name with document.getElementsByClassName. 0:12
    In index.html, let's add a class attribute to some of the items 0:17
    in the unordered list and set it to the class name, highlight. 0:22
    It could be any item, I'll add it to the second list item, 0:27
    then the fifth and the sixth item. 0:32
    I'll save this file, and next select them with JavaScript. 0:38
    In app.js, declare a new variable named highlights 0:46
    to reflect what we'll assign to it, 0:51
    then get all elements that have a class of highlight with 0:54
    document.getElementsByClassName and pass it the string highlight. 0:59
    I'll save my file, refresh the browser, and in the browser console, 1:09
    I'll reference the variable, highlights. 1:15
    Notice that the getElementsByClassName method also returns an array 1:19
    like HTMLCollection. 1:24
    It contains each element with the given class, 1:25
    highlight, in the order they appear on the page. 1:28
    You can directly access any of these elements, like we did earlier, 1:31
    using an index value and bracket notation. 1:35
    If you want to access and do something with the elements all at once, you'll also 1:38
    need to iterate through the HTMLCollection and change each element one by one. 1:42
    You could do this using a for loop. 1:48
    This time I'll teach you a different kind of JavaScript loop you can use to iterate 1:50
    through arrays or array like objects. 1:54
    It's called the for-of loop. 1:57
    It looks similar to a for loop, only more compact. 1:59
    Within the parentheses, 2:04
    you provide a variable that represents the current item being processed in the loop. 2:06
    This is similar to the index variable in a for loop. 2:12
    I'll name it highlight, follow the variable with the keyword, of, and 2:15
    the name of the array or collection you're looping over. 2:20
    In this case, the HTMLCollection assigned to the highlights variable. 2:24
    Inside the curly braces, you provide a statement or 2:30
    action to be carried out for each element that gets passed into the loop. 2:33
    Now what might we do with each highlight item? 2:38
    Well, normally you might hide or expand selected elements, 2:41
    remove them, or perhaps change them to fit some criteria. 2:45
    For now, let's just set a new background color with JavaScript to show that 2:49
    our selection is working. 2:52
    Within the for-of loop body, 2:54
    I'll access the current element assigned to highlight, 2:57
    then set its background color style to 'cornsilk' with 3:03
    dot style.backgroundColor equals the string 'cornsilk'. 3:08
    This for-of loop looks a whole lot more compact than a for loop, doesn't it? 3:18
    And remember, you can use it with regular JavaScript arrays too. 3:23
    Check the teacher's notes to learn more about it. 3:26
    I'll save my file. 3:28
    And switching back to the browser and refreshing the page, 3:31
    displays the cornsilk background colors for the highlighted items. 3:34
    Good, this means that the selection worked. 3:38
    All right, up next I'll show you a more powerful and 3:41
    flexible way to select elements in a document. 3:44
    See you there. 3:46

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up