Transcript from the "Finding Elements in a Web Page" Lesson
[00:00:47] So let's dig in a little bit, in the inspector, we can do drill down into different elements and we can kinda get a sense of what all is in this page. We've got some header h1, h2 elements, we've got some of those container divs, some paragraphs, etc. Then, we've got a div with some other divs.
[00:01:09] So just getting familiarized with building our human mental model of what's in this page. What we're gonna do now is show how if we go back to the console and we work with this document object, which we can invoke or kinda call-up by entering the word document in the console.
>> The title of the document.
>> The title of the document, excellent. So this is the page title, if you want to try it out.
[00:02:31] But this is how we can get the title of the document. What about document.body? [LAUGH] This is perhaps unsurprisingly, the body element in the HTML. So if we notice in our inspector, we have all of the content that we really care about is usually contained within this body element.
[00:02:57] There's also a head element that has some other things, like for example, the document title. And so document.title is just kind of like a nice little quick way of accessing that. But usually what mostly we're gonna be concerned about is what's in the body of the page. So what is contained within this body element which we can access by typing document.body.
[00:03:21] And again, this might look slightly different depending on your browser, but that will also give you a body element which has a bunch of stuff in it. We're not going to worry too much about right now. We can also use a special kind of addon to a lot of the things we're gonna be working with today called .children.
>> The header in the divs.
>> So in this case, the header and divs that we drew out before in our tree, thank you [LAUGH] and in different documents that might look different.
[00:04:18] So depending on what you have in your particular page, document.body.children is going to return some group of elements. In this case, it's something called an HTML collection that has some other stuff inside of it. And we can sort of get a sense here that there's like a header in there.
[00:04:38] There's this div with an ID called board in there. And this is gonna be different on different web pages, but in our page, which we looked at before, we had a header and a div inside of the body, that is what we're gonna turn up here, great. So, this is going to be all the elements contained within, in this case, the body.
[00:04:59] And as we're gonna see later, we can use .children on other elements to find out what else they have inside of them. So this is how we can kinda drill down into the DOM tree. Okay, what about this one, document.getelEmentById(board)? What do you think this is gonna give us?
>> Is it the div that you created earlier?
>> The div that we created, well, we all ready had it kind of, it was all ready there in the page. But yes we have a div in our page that has this attribute Id equals board. In this case represents this little tic tac toe game board.
[00:05:38] But you might be working with all kinds of different HTML elements here. And often, assigning an Id to an element is a really great way to say, hey, this element is special and I want to be able to refer to it by an individual indicator an Id, an identifier that picks out only this element in the page.
[00:06:00] So Ids are supposed to be unique to a single element. You ideally shouldn't have in your HTML document multiple elements with the Id attribute set to the same value. So in this case, so document, sorry, just to make this a little bit easier to read here, there's a fun little thing I can type in clear to reset kind of clear out all of the history.
[00:06:26] So clear with two parentheses like that. We'll wipe out whatever stuff I saw before. And so now if I enter document.getElementById, and notice the capitalization here that is important. So capital E, capital B capital I, and then pass in the name or the Id, sorry, of a particular element that will return whatever element that is.
[00:06:52] In this case, it's a div. In some other case, it might be some other element, P for a paragraph for, an H1 or whatever other element you want. So get element by Id is a really useful way to pick out a particular element, an individual element from the page.
[00:07:12] So, if for whatever reason, you have two elements with the same id, which again, you really shouldn't, but maybe somebody else wrote the page and it's their fault. In this case, it'll give you the first one it finds, that has that Id. But usually id's should be unique, so it should give you the one element with this Id.
[00:08:01] So let's go back to our console here and try that out. And it's going to pick out the same element as get element by Id with just the Id no hash returns. So these are equivalent. Cool, questions so far? Excellent, all right, so, sometimes we want to pick out elements differently.
[00:08:26] Sometimes maybe we don't have an Id or we wanna choose an element of a certain kind. So a certain type of element or a certain tag for elements. So we also have the option get elements by TagName. In this case, if I were to run get element by TagName h1, what do you think this would return on our Tic Tac Toe page?
[00:08:48] What would this pick out of the DOM?
>> First header.
>> In this case, what what is that header just in our page here?
>> Tic Tac Toe,
>> Tic Tac Toe, yes, so we have this h1 element that has the text Tic Tac Toe inside of it.
[00:09:07] And if I type document get elements by tag name, there's only one h1 element in the page. So when I, sorry, get elements by tag name h1, I'm actually going to get a collection cuz there might be multiple h1s in the page, but in this case, this collection.
[00:09:28] If you'll notice it just has one h1 in it and it says its length is 1, cuz there's only one h1 element in this page. On a different page, you might maybe have multiple h1 elements. Probably not because h1 should sort of be the major thing stylistically but it's possible you'd have multiple elements with the same tag.
[00:09:47] So this is going to pick out all of the h1 elements and what if we were trying to use that CSS version? What if we were trying to use document query selector? What would be the CSS for this, does anybody know how we could pick out all of the h1 elements in a page and with a CSS selector?
[00:10:10] It's a little bit of a trick question, cuz it's the same. [LAUGH] So in CSS, when we just type the name of an element, that would select, or sorry, the tag of an element, in this case, h1 that would select the h1 elements. And so in this case, unlike with the Id, where we only expect there to be one element with that particular Id, we might have multiple elements matching this this query selector.
[00:10:33] In this case, it's the h1 element is what we're trying to select. And so, that's where instead of query selector as we use for the Id example, we can use the spell, document.query selector all to collect all of the objects of the elements of a particular tag type in the page.
[00:10:53] So this is kind of equivalent to get elements by tag name. And as we're talking through this feel free to play around, try out different selectors, try out different tag names. Just another way we can select things is by the class that is assigned to them. So in HTML we have the concept of a class attribute.
[00:11:15] Oops, so for example, in our header here we have a p element inside of a div with a class of player. And that's going to represent like in this case it's just a little descriptor showing that I am the player assigned to the letter x in our Tic Tac Toe game.
[00:11:34] And if I wanna pick out elements with a particular class, I have this spell get elements by class name. Does what it says on the tin as they say. So this is going to pick out all the elements with that particular class. And we can prove that if you don't believe me, I can show you.
[00:11:56] So if we do document.getElementsByClassName player, I get a couple of player elements because I have a player x is p1 and a player O p2. Mark and I are playing tic tac toe in this example [LAUGH]. Okay, we said previously that we had a similar spell we could use called queryselectorall and look at my browser being so helpful.
[00:12:30] That we said we could do like for example, we could get all of the h1 elements by doing that. Any idea what selector what CSS selector we could use to get all of the elements with the class player, so the equivalent to get elements by class name?
>> So we can use the same method that we used before so this query selector all. We can use, the question is, what do we pass in instead of that h1, what do we pass into select or earlier we use the singular query selector with #board to get the element with Id board.
[00:13:07] We use query selector all with h1 to get the h1 elements. And to get all the elements of the particular class we can use, yeah, Chan?
>> They're share the same .player.
>> Exactly, we can use the CSS selector for a particular class is a dot, and then the name of the class.