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 Tag Name

7:40 with Guil Hernandez

If you know the tag name of the element, you can use getElementsByTagName(). This method returns an HTMLCollection of elements with the given tag name.

Exercise

Inside the loop, the variable i holds the current index value. Log items[i] to the console to view the returned elements as the loop runs.

for (let i = 0; i < items.length; i++) {
  items[i].style.color = 'orchid';

  console.log(items[i]); // <li style="color: orchid;">Make coffee</li>
}

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

    Earlier, you use the getElementById method to access one element with 0:00
    the specified ID. 0:05
    What if you want an element that doesn't have an ID, or 0:07
    you want to select multiple elements on a page? 0:11
    For example, you might want to select all the items inside an unordered list so you 0:14
    can turn them into to do list items that users can click to mark a task as done. 0:19
    If you know the tag name of the element, you can use document.getElementsByTagName. 0:25
    This method is similar to getElementById, with one important distinction. 0:31
    Notice the plural word, Elements, 0:35
    while getElementById has the singular form, Element. 0:38
    Not only will you get an error if you mix these up, but 0:43
    also each method returns a different data type. 0:45
    Let's head over to the browser console to see how it works. 0:49
    The purpose of getElementById is to access and 0:52
    return one element in the DOM directly. 0:56
    For example, you've seen how document.getElementById('headline') 1:00
    returns the one h1 element. 1:06
    The getElementsByTagName method doesn't quite work in the same way. 1:09
    And you use it when you need to access and return multiple elements in the DOM. 1:13
    In the console, let's access the li elements in the document 1:18
    with document.getElementsByTagName, passing it the string li. 1:24
    Notice that instead of the element nodes, it returns something called 1:32
    an HTMLCollection, and it looks like an array holding these six li tag names. 1:37
    An HTMLCollection is an array-like collection of elements listed in the order 1:42
    they appear on the page. 1:47
    Now, an important distinction to make is that array-like collections like 1:49
    this are not constructed like regular arrays. 1:53
    So they don't exactly have all of the same properties and methods as array literals, 1:56
    for example. 2:01
    Collections will have their own properties and methods, 2:01
    some of which are like those of an array. 2:04
    For instance, the length property returns the number of items in an HTMLCollection. 2:07
    This returns 6 because there are 6 li elements on the page. 2:13
    Since you can treat this HTML collection just like an array, 2:18
    you can access elements directly using its index and bracket notation. 2:22
    For example, access the first li element the same way we would get an element 2:27
    from an array, using 0 because 0 is the first element of an array. 2:32
    And this returns the first li element containing the text "Make coffee". 2:36
    Let's try selecting other elements, like buttons. 2:43
    I'll select the button tags with document.getElementsByTagName, 2:46
    passing it the string 'button'. 2:53
    And this returns an HTMLCollection holding three button elements. 2:58
    And I can see that the button with the ID btn-main is first in 3:03
    the collection at the 0 index. 3:07
    Now I can, for example, do something to this specific button with JavaScript, 3:10
    like change its color 3:14
    with bracket notation specifying 0 as the index, 3:16
    then .style.color = 'yellow'. 3:22
    Remember, even if there's only one element in the DOM with the tag name 3:32
    you've specified, you'd still need to access it like this by its index and 3:37
    with bracket notation. 3:41
    Otherwise your script will throw an error. 3:43
    For example, selecting the only h1 element on the page and 3:47
    attempting to set its color like this throws an exception 3:52
    letting you know that you cannot set a color property on something 3:57
    that's undefined. 4:00
    What this message is really saying is that you can't set the style.color of 4:01
    a collection, because the collection doesn't have a style property 4:06
    But specifying the index value of the element in the returned 4:14
    collection with bracket notation works as expected. 4:18
    getElementsByTagName really shines when you have several elements to select and 4:24
    manipulate all at once. 4:29
    Let's go into our JavaScript file now and 4:32
    use getElementsByTagName to select all the list items in the document. 4:34
    With document.getElementsByTagName(), 4:39
    passing it the string 'li'. 4:45
    First, I'll try changing their background color. 4:50
    So I'll call .style.backgroundColor, 4:53
    And assign it the string skyblue. 5:02
    I'll save my file, refresh the page, and nothing changes. 5:06
    Looking in the console, I once again get that same error message, 5:12
    Cannot set property 'backgroundColor' of undefined. 5:16
    Well, we know that you can't call style.backgroundColor, or 5:19
    any of the properties and methods for HTML elements on the HTMLCollection itself. 5:24
    Because the collection doesn't have the same properties and 5:29
    methods as the individual elements. 5:32
    When you have multiple elements in the collection that you would like to modify, 5:35
    you have to use a JavaScript loop to iterate through the collection, 5:40
    then access and do something to each element one by one. 5:44
    This time I'll make my code more readable by assigning the li 5:48
    collection to a variable I'll name items. 5:52
    Items now hold a reference to the HTMLCollection. 5:59
    Now with JavaScript, I can iterate over all the items inside the array-like 6:05
    collection and do something to them. 6:10
    There are different loops and 6:12
    methods you can use to iterate over an HTMLCollection with JavaScript. 6:13
    I'll use a for loop, which you've worked with in previous courses. 6:17
    Between the parentheses, 6:22
    I'll type let i = 0; i < 6:27
    items.length; i++. 6:31
    If you need a refresher on how for loops work with arrays, 6:35
    be sure to review the links to related Treehouse videos posted in 6:38
    the teacher's notes with this video. 6:41
    I've also included information about other ways to iterate over a HTMLCollection. 6:44
    Inside the loop, the variable i holds the current index value. 6:49
    So I'll use i and bracket notation to reference 6:55
    each item in the HTMLCollection and set its text 7:00
    color to orchid with .style.color = 'orchid'. 7:05
    I'll save my file, and in the browser, 7:13
    refreshing the page updates the text for each item in the list to orchid, good. 7:17
    This was only a simple example of accessing collections of elements and 7:23
    doing something with them. 7:27
    And as I mentioned earlier, you'll usually change text color like this with CSS. 7:29
    And later, you'll learn how iterating through and 7:34
    accessing elements in these array-like objects can be useful. 7:36

    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