Transcript

          
        
          So in the last lecture we saw how to use two different methods query selector and query selector all

          both on the document, object to query the Dom and grab elements from it.
          
          Now the query selector that grabbed a single element, but the query selector all it grabbed multiple
          
          elements based on CSS selectors.
          
          Now in this video I'm going to show you some alternative ways to query the Dom, to grab elements,
          
          and I'm going to show you three in total.
          
          The first way I'm going to show you is to grab an element by its ID.
          
          So the way we do that is by, first of all, creating some kind of variable I'm going to call it title
          
          and set it equal to document.
          
          And the method we're going to use is called get Element by ID.
          
          Now, if we look inside our index page, we can see we have this one right here.
          
          I've given it an ID of page hyphen title.
          
          Now in an HTML page, you shouldn't have more than one ID of the same name, so there shouldn't be another
          
          ID down here with page title.
          
          There should only be one ID of that name on the page.
          
          So now inside here, all we need to do is place in a string the ID.
          
          Now we don't need the hash symbol, which we would do if we were using query selector to select an ID
          
          that's already implied in the name.
          
          We're already selecting an ID, we just need to specify the name of the ID and that is page title.
          
          So this goes out and it gets a reference to this page title ID element, which is the H1.
          
          So now if I say console dot log and the title, we should see that in the console.
          
          Save it and check this out and voila, we get it right there.
          
          Cool.
          
          So the next one I want to show you is how to get elements based on their class name.
          
          So let's come down here.
          
          I'm going to say const errors because we're going to go out and grab the errors and that's going to
          
          be equal to documents.
          
          Dot get elements by class name and notice the difference here elements is singular.
          
          So this only ever grabs a single element.
          
          This here is plural.
          
          So it will grab multiple elements.
          
          If there are multiple elements of that class.
          
          So inside index we can see this has a class of error and this has a class of error.
          
          I want to grab both of those so I can enter the class name in here.
          
          Again, we don't need the dot as we would do in a CSS selector using query selector.
          
          It's already implied that we're getting a class in the method name, so we just pass in the class name
          
          without the dot right there.
          
          Now if we log this to the console errors.
          
          Oops, we need to do this correctly errors and save this.
          
          Let's have a look what happens.
          
          Okay, so we get this thing right here.
          
          Now, this is an HTML collection.
          
          In the last video when we used query selector, all we saw that we got a node list.
          
          Now these two things are similar but not identical like a node list.
          
          We can still use square bracket notation to get a single element from that list or that collection.
          
          We can say console, dot log and then errors and we'll say zero to get the first element.
          
          For example.
          
          And it's still going to give us that back.
          
          But we cannot use the for each method on the HTML collection.
          
          If I try to do this, let me come down here and say errors dot for each and then inside we'll do a callback
          
          function with an error parameter.
          
          This is each individual error.
          
          This is not going to work.
          
          Console dot log error and save this.
          
          We can see we get an error.
          
          We can see errors.
          
          Dot for each is not a function so we can't use for each on an HTML collection.
          
          Okay.
          
          So what I'm going to do is leave a little document attached to this lecture just showing the different
          
          things we can do with a node list and an HTML collection so you have those clear in your mind.
          
          But anyway, this is a way to grab elements based on their class name.
          
          So let me just delete that and I'm going to comment all of this stuff out for now and this stuff up
          
          here.
          
          So it's not putting us off in the console.
          
          And finally, I want to show you how to get elements based on their tag name.
          
          So I'm going to try and grab a reference to all the tags in the document.
          
          So I'm going to be looking for the tag name P So the way we do this is again, by storing it in some
          
          kind of variable and setting it equal to documents, dot get elements by tag name.
          
          So they're all self-explanatory.
          
          They're quite easy to remember and we just pass in the tag name as a string right here.
          
          So this goes out and it grabs all of the P tags on the page and it's going to store them again in an
          
          HTML collection inside this Paris constant.
          
          So if I say console dot log and we're going to log out Paris, we should see those over here again,
          
          HTML collection.
          
          And if I want to grab a single one of those, I can use square bracket notation.
          
          So console dot log Paris and we'll just say we want the index one from there save and we can see that
          
          p tag right here.
          
          So.
          
          All of these different methods give us different ways to query the Dom.
          
          It doesn't much matter which methods you choose, but anything you can select with these methods, you
          
          can also select with the query selector methods I showed you in the last video.
          
          So I tend to stick with using the query selector or query selector, all because it's simple and very
          
          flexible and you can query any element you need using them.
          
          Also, it's useful to be able to use for each directly on a node list which is returned by the query
          
          selector methods, tag name and class list.
          
          Both return HTML collections which we can't directly use for each on.
          
          We'd have to convert these into arrays first of all, which is just one extra step we can do without.
          
          But again, you can still use these methods and they're nice to know you can use whichever one you're
          
          most comfortable with.