Finding Elements Exercise

[00:00:00]
>> So unless there are any questions, which of course are welcome at any time, let us take a moment to try and play around on our own and using what we've seen so far and our friend MDN if we need, let's try to figure out. We can take maybe five minutes, to figure out what you'd need to type in the console to retrieve these various things.

[00:00:24]
So first of all, we're gonna try to get all of the p elements then we're gonna try to get the text on the page. On our Tic Tac Toe page, this is all gonna be on our Tic Tac Toe page. I'm gonna try to get the p elements, we're gonna try to get the text X like this little symbol X here in the player X, Anjana.

[00:00:41]
We're gonna try to get the number of squares, squares that are represented in the tic tac toe board. And then we're gonna try to get the text "a game you know" from the top of the page. So this is your scavenger hunt, should you choose to accept it.

[00:00:55]
So let's take a few minutes, and then we'll review together. Welcome back all right, how did this scavenger hunt go? Did we find all of the things we were looking for? Let's find out [LAUGH] Okay, so your first task was to retrieve all of the p elements in the page, let's clear out our previous work here.

[00:01:25]
And who could walk me through how they found all of the p elements? Maybe somebody from the classroom? How about Jason any.
>> I tried using getElementsByName.
>> Okay, so.
>> And it returned a NodeList but I don't think that's quite right.
>> Well, let's try it out.

[00:01:48]
So what did you type in to get elements by?
>> I typed in document.getElementsByName, and I put
>> getElementsBy, okay, so you might also find in your browser console you might get some helpful, well, maybe helpful, the browser trying to be helpful, some completions here. So if I type in getElementsBy I get some options here, one of them is ByName.

[00:02:14]
So let's maybe just make sure that we're talking about the right thing here. We also see something else called getElementsByClassName, getElementsByTagName, and then some other thing called TagNameNS. Where can I go if I wanna find out what these methods do and which one I want?
>> MDN
>> MDN, yes, this is gonna be the answer to a lot of questions I ask.

[00:02:39]
Excellent, so let's figure out so getElementsByName, if I type that in, that's gonna take me to the page. And this is gonna say okay, the getElementsByName method of the document object returns a node lists collection of elements with a given name attribute in the document. Okay, let's scroll down and see kind of what it means.

[00:03:02]
So in this case, for example, let's say we have a document where we have some content and let me make that a little bigger. In this case some input elements that have an attribute name defined on them. so getElementByName would be the perfect thing to use if we're trying to pull out elements with that particular name.

[00:03:25]
In this case, in our document, we don't have a lot of name attributes defined. In this case the p elements, they have an ID attribute, they have a class attribute but they don't really have a name attribute defined. So what I actually could use is if I just want to pick them out by the fact that they are p elements, paragraph elements, so in that case we can check out the similarly named getElementsByTagName.

[00:04:04]
Spell, and in this case it's going to return a live HTML collection of elements with the given tag name. So in this case, let's say we have a table element which has some td within it, that sort of thing, we can select that with the getElementsByTagName. So in this case, we're gonna get slightly different things if we do getElementsByName("p") I get an, I do get a NodeList.

[00:04:34]
It's a collection of things, but how many things are in it?
>> Zero.
>> Zero, how could I check that? How can I find out how many things are in a collection of things? .length, yes, see, we're already learning these spells, it's great. We're witches already. [LAUGH] But, if I try document.getElementByTagName("p") I get a slightly different type of collection, I get an HTML collection and in this case if I try .length on that, I can see that I do have two elements.

[00:05:13]
So I have those two p elements. So this is great and totally great point that you raised here about this other method that we discovered. We'll talk about what the method is tomorrow, but this spell that we discovered getElementsByName is another option if you are trying to find elements with the particular name attribute.

[00:05:33]
Okay, how about number two, the text X, maybe I'll ask Jason for this one since we talked about it a little bit. I'm sorry, Paul, I just said Jason, Paul yes.
>> I just did console.log and then just put the X in there.
>> Okay, so one way we can get the value X is by whoops, console.log X, we saw console.log is a spell that I showed earlier that can type something or print something out into our web console.

[00:06:07]
So if I want a letter X, I can say console.log(X"). And this will print out an x that I have told it to print out. So this is valid and we're gonna use a lot of console logging in our JavaScript lives. And we're gonna talk later about console log, and we're gonna talk later about what this undefined, where it is that just mysteriously popped up here.

[00:06:31]
But in terms of our scavenger hunt, what we're trying to do is pick out, not just any X which in this case, I've kind of conjured a new X into existence by typing it in quotes into the console. But what I want is actually the letter X that's right there, the letter X between the words player and Anjana.

[00:06:54]
So if we dig into our document in the HTML inspector in our dev tools, we can see that this letter X, It shows up in here inside of there's this header, there's the div with the players. There's a P with id p1, then there's a span with idp1 symbol, and then there's an X.

[00:07:15]
So can we use that information to pull out not just any X but the X that is in the HTML document. Anybody wanna help?
>> document.querySelector("ap1-symbol") and then enter text.
>> Okay, so we can do document.querySelector.
>> Or text content.
>> And then in quotes a CSS selector for an individual element, in this case the id which, we said we can use that hash symbol in CSS to select the id so this will get us that span element.

[00:08:00]
Excellent, thank you Chad, and then, if I type .textContent for example, then I will get whatever is inside of the element with that id. So this is a totally valid way to pull out that particular X. Excellent point, did anybody have a different solution? Like I said, there's always multiple ways to do things, not always but usually.

[00:08:24]
>> There was one with the same basic concept but using document.query, sorry, getelementById.
>> Right, okay, so we could do document.getElementById you can also use tab to complete if your browsers dev tools are offering you options you can press tab to complete document.getElementById and then a, quote, double quotes and the name of the id no hash this time, right?

[00:09:01]
So we could do p1-symbol, that's gonna get us that span element, same element as query selector#p1-symbol. And then I can do texContent and pull out the X. Excellent, so these are both valid, good hunting, yes question.
>> Hey miss I have undefined.
>> Okay, in yours you have undefined so what did you pull out?

[00:09:31]
What did you type in?
>> document.getElementById("p1-symbol.textcontent"), how did I spell that?
>> So if I typed in, let's say, text, maybe this happens to me all the time. So do you noticed when I do textContent, if I autocomplete, I'll see it's the capital C, for example, maybe I just was typing really fast and I typed it all lowercase, and then we get undefined.

[00:10:06]
What is that? What does that mean? And why do we get that? We are going to explore later today. So I'm gonna put a pin in that, but this raises two points. Number one, undefined is something that we're gonna, we've already seen it crop up once or twice now.

[00:10:22]
We're going to talk about it later today. And case sensitivity, so the names of these things document.getElementById, querySelector, etcetera, the little letters and the big letters, it matters to JavaScript. So and spelling and things like that sometimes, this happens all the time. Where something, I do this every single time, I type document getElementBy capital I, capital D, I do this all the time, and then I get.

[00:10:50]
No, that's not a function. I don't know what you're talking about. So JavaScript can be very picky sometimes about spelling and things like that. Can also be very loosey-goosey and not care sometimes when you wish it would care and tell you that you've made a mistake. So we're gonna be working through all this and we're gonna be talking about how we can debug when we're having unexpected results.

[00:11:14]
But later today, we're gonna talk about what that undefined is and why It shows up sometimes. Great, great, great point, great question.
>> I'm gonna say the up button on my browser allows me to go back to what I had before so I can fix a letter and re-execute.

[00:11:32]
>> Great discovery, excellent. So if you press in your browser's dev tools Usually, if you press up in the console, you'll get the last thing that you entered. And if you keep pressing up, you'll get the previous things that you entered, as far back as you've been working in this tab or in this window.

[00:11:49]
So, if I type up and I see, okay, I misspelled, I put capital I, capital D there, I can just edit that. And now I can use it as let's say what was it p1-symbol as expected. So super handy also if you're like, No, actually I meant to get p2-symbol makes your life easier.

[00:12:12]
So pressing up when you wanna go back in history, excellent discovery by OJ here. And then also when your lazy as many of us developers are, and you want to just complete something and I've only typed getEleme I can press tab, and it will complete whatever the auto suggest was suggesting.

[00:12:34]
Okay, let's continue with our scavenger hunt the number of squares in the tic tac toe board. Anybody yet Steven?
>> So I did querySelector all the squares, and then give me the link.
>> Okay, so can you walk me through what you typed to get all this.
>> document.querySelectorAll.

[00:12:54]
>> queryselectorAll.
>> And CSSSelectorSquare.
>> Okay, and so then the quotes and then what how do we select for?
>> .square. .square, okay. That's going to give any element with the class of square, which happens to be applied in this document.
>> No .link.
>> Yep so in this document, if we drill down in our HTML inspector, we notice that all of the squares in the board have this class applied.

[00:13:25]
So that is, in this particular webpage, that is a great way to pull them out. So if we do .square, we get all of those and then.
>> .length.
>> .length tells me how many there are. There are nine, as we would expect for a tic tac toe board.

[00:13:40]
Excellent, thanks so much, Steven. How about the text from the page that says "a game you know". In this case, it shows up underneath the main page header. So if we look in our HTML, collapse a few things here, we noticed that is in the header element in an h2.

[00:14:04]
So can anybody walk through what I would need to do to pull out this text? And maybe if someone is in the chat, we can also find out from there. Now, in this case, I don't have a lot to work with, right? I don't have an id on this element, I don't have a class on this element, so what else can I work with?

[00:14:23]
Yeah, OJ.
>> The document.querySelector("h2.textContent").
>> Great, okay, document.querySelector("h2.textContent") A game you know, love it, excellent work. All right, fabulous hunting, everyone. We turned up all of these things. [LAUGH] Any questions so far? Or are we itching to not just find things in the page, but bend them to our will?

[00:14:58]
>> So I did querySelector("h2.length") and then it said undefined. I'm just trying to understand if there is something in there, why would it be undefined?
>> Interesting, okay, so if we do document.querySelector(" h2.length") undefined. Our friend undefined showing up yet again. We're gonna talk later about why this is but essentially so what happens when I get querySelector("h2") by itself is that I get the h2 element itself.

[00:15:28]
Or more specifically I get a JavaScripty representation of that element that I can work with. Were gonna talk later today about objects and we they have a certain aspect you could say called properties that I can access. So in this case, if I open up this h2 element in my dev tools and I look through.

[00:15:52]
These are all different values that this knows about and the names that I'm seeing here like like inner text or children etcetera these are properties on the object that represents my h2 element. We're gonna talk more about objects and properties later. But suffice it to say when I type in .length JavaScript is looking at this list of things that it knows about and it's looking for a length.

[00:16:18]
And it's like I don't know about a length on this element. However, and we're gonna see this later, if I were to do textContent.length, then I get something. And we're gonna talk later about what that is and why. So this is another great discovery. I love all these intrepid explorations and discoveries that we're making already today.