Finding Elements in a Web Page

[00:00:00]
>> Hello okay so we were digging into a HTML document in JavaScript. So we were on this Tic Tac Toe page and we had shown that in the Inspector tab in our browsers dev tools we can get a sense of what is in that page. So in here and yours might look a little bit different both the JavaScript console and the Inspector might look slightly different in different browsers.

[00:00:30]
For example, I'm in Firefox right here. You might be in Chrome or Edge or another different browsers, or Safari, and the dev tools in all of these browsers are slightly different. But the contents of the page and the objects that JavaScript sees and represents the page width should be the same.

[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.

[00:01:27]
We're going to be able to see how JavaScript represents these same elements and the same content in the page in its own own JavaScript anyway. So let's dig in. Okay, so we saw that the the document word by itself is kinda a special built in object. We're gonna talk about objects later.

[00:01:47]
But it's a built in object in JavaScript that represents the whole document. So that is the entire HTML document that we are working with. Any guesses what document.title represents?
>> 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:12]
So in this document or in this web page, you'll notice that the in the browser tab or on the title bar of the browser, you'll see a title that you can access that JavaScriptTacToe title with document.title. And we're gonna talk more about this dot and what is going on with these dots later.

[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.

[00:03:48]
Any guesses what document.body.children would give us? Or perhaps review for folks who have encountered the DOM before in JavaScript,
>> 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?

[00:05:19]
>> 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:07:30]
And there is another handy little invocation I can use to essentially use CSS selector syntax to pick out certain elements of the page. So for example, the selector for an id is this kind of hash, the number pound sign. So if I use a spell called query selector in JavaScript document.querySelector, I can enter in a CSS selector like #board to indicate I want the element with the Id of board.

[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?
>> ElementsByClassname.

[00:12:48]
>> 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.

[00:13:23]
So this is just a little CSS fun that we're having here. The point is that we can use the same way that we in CSS interact with different types of elements in the page. We can use that in JavaScript. So if you're comfortable with CSS, you've got a leg up.

[00:13:39]
And if not, if you'd rather spell it out what you're doing like for example, get elements by class name is maybe also helpful mnemonic to remember what you're trying to do here. So whichever you're more comfortable with is totally valid. You have lots of options, this is generally true in JavaScript there is usually not just one way to do things there's usually 8000 different ways to do things.

[00:14:01]
So everybody who writes JavaScript kind of develops their own feel for how they like to write it and it's a adventure. There are sometimes advantages and disadvantages which we can talk about throughout the course. And in general in our JavaScript lives, we'll discover as we go. But there are lots of different ways to do the same thing.

[00:14:22]
So just to prove that this works, we can do document.query.SelectorAll, player. And remember there's look at these quotes around these things. This is important because we're gonna talk later about what that does in JavaScript. But so, if we put in quotes the the name of an element that gives us all those elements dot and then the name of a class gives us all the classes hash and the name of an Id gives us an Id etc.