Select All Elements of a Particular Type

In the last video you learned how to select an element by its ID. 0:00 This method selects a single element- the HTML tag with the ID. 0:05 But if you want an element that doesn't have an ID or 0:09 you want to select multiple elements on a page. 0:12 For example, you might want to select all the items inside an unordered list, so you 0:15 can turn them into to do list items that users can click to mark a task is done. 0:18 Well, if you know the tag name of the element. 0:23 You can use document.get elements by tag name. 0:25 This method is very similar to the previous one we've learned but 0:29 I'd like to point out a crucial difference. 0:32 This method contains the word elements 0:34 while the last one has the singular form element. 0:37 Not only will you get an error if you mix these up but 0:40 also each method returns a different data type. 0:42 While a get element by ID returns a single element that can be accessed directly 0:46 get elements by tag name returns a collection of elements. 0:51 A collection is like in array you can access an element directly using its 0:56 index or loop over the whole collection to access all of them. 1:00 So let's hop over to the chrome developer tools in our browser to see how it works. 1:06 We will refresh the page to reset it and 1:10 in the console we will declare a constant, my paragraph. 1:13 Assigning it an HTML collection of all the paragraph elements. 1:16 So I'll type const my paragraph 1:20 equals .getElementsByTagName. 1:25 And I want to get all the p tags. 1:31 So now, if you type myParagraph.length, 1:36 You see that we get one because there is only one paragraph element on the page. 1:44 And then we can access that element the same way we would get an element from 1:49 an array using 0. 1:54 Since 0 is the first element of an array and 1:56 as you can see this returns the paragraph element. 1:59 So now let's change the paragraph to blue using the trick we've used 2:03 for the heading. 2:06 So we'll type myParagraph 0 .style.color = blue. 2:08 And the paragraph turns blue. 2:17 So now let's go over to app.js and 2:20 use getElementsBy TagName to select the heading element. 2:23 Instead of getElementByID. 2:27 Remember, we're getting a collection back, but there's only one heading on the page. 2:39 So we know that element will be first in the collection, so 2:44 I'll define an index of 0. 2:47 Let's go ahead and save our file, and now if we switch back to the browser and 2:49 refresh we'll know our changes worked if our app still functions. 2:55 So I'll just type coral in the text field and click the button and cool. 3:00 It changes color. 3:05 Now getElementsBy TagName really shines if you have several elements to select. 3:06 So for example, let's jump over to the HTML file and 3:13 I'll go ahead and delete the input and button elements for now. 3:17 And let's put a paragraph and list here instead, a list of things that are purple. 3:22 Now you can copy this exact snippet from the teachers notes of this video. 3:27 So now with JavaScript, we're going to turn the text in the list to purple. 3:31 I'll give index.html a save, 3:35 and over an app.js I'm going to select and remove all the JavaScript we've bring so 3:40 far, but don't worry you can still view and 3:46 reference all the code written in this course by downloading the project files. 3:48 Writing each piece of code separately will make everything in these lessons 3:51 easier to explain. 3:55 So now, save your file then go over to the browser and refresh to see the new list. 3:56 Now let's get into the console and 4:02 create a new variable of myList and assign the list items to it. 4:04 So I'll type const myList = 4:09 document.getElementsBy TagName and 4:14 I'm going to get the LI elements. 4:19 So first, let's change the word lavender to purple. 4:27 Now, lavender is the third item in the list, meaning that in the collection, 4:31 its index is 2. 4:36 So over in the console, 4:38 I'll type myList 2.style.color = purple. 4:41 Great, it changes to purple. 4:52 So now let's change the whole list to purple. 4:54 Back in app.js, I'll select the list items here again, 4:56 with const myList = document.getElementsBy 5:03 TagName ( ' l i ' )and we can then 5:09 iterate over all of them with a for loop. 5:13 So now, inside the loop we can set 5:36 each list item to purple by typing myList[i] 5:41 .style.color = "purple". 5:48 All right, so let's save our file and have a look in the browser. 5:54 I'll refresh the page and we see that the list is now purple. 5:58 So great work. 6:03 Up next I'll show you a way to select elements based on their class. 6:04