Transcript from the ".length & .textContent" Lesson
[00:00:16] These are different types of collections or groups of different elements in the page, and when we have something like that with possibly multiple elements inside of it, we can type .length, any idea what this is going to give us? Yeah.
>> Sorry, it was a question about when you looked back and you saw there is HTML collection versus a Node List, are they effectively the same thing or what?
[00:01:15] And it has a couple of different layers of wrapping that it surrounds these element with. So it has concept of element objects, which we'll talk about, again, later when we get into objects and things like that. And it has concepts of nodes in the HTML tree essentially, this document tree that we can work with.
[00:01:37] So functionally, these often end up being equivalent. There are differences, and I'm gonna give you a pointer later to where you can go if you really wanna dig into those differences and really talking about what is a node, what is an element, etc? Right now I'm going to hand wavy say, let's just think about these as equivalent for now.
[00:02:02] Because we can often do the same types of things with them. Cool, okay, so any guess what this .length is going to do if I add it on to the end of one of these getElementsByClassName or query selector all? What do we think this is gonna give us?
>> Is it the length of the variables like the length of your name and Mark's name.
>> It might be the length of the name but that would require us putting a few extra things in between the getElementsBy and then the .length. But that is a good guess.
[00:02:39] Guess from the chat.
>> The count of the elements that are returned.
>> The count of the elements that are returned. Yeah, so I think that what we were saying is essentially the number of elements that are returned, right, like if we were to count them, one, two, three, four.
[00:02:53] Exactly, so let's try it out. Just gonna clear here. So if I do document.getElementsByClassName, and then put in the name of the class I want in this case, player.length, I'm going to get the number two. So that is because if I take out this .length, we notice that in the HTML we have two elements that are both p elements in this case with a class of player.
[00:03:23] One for the X player and one for the O player called p1 and p2 are their IDs. So in this case, this class selector selects two elements. On a different page for a different game, let's say, you might have a different number of players. Or if you're using a different query selector, you might have a totally different number of elements than you expect.
>> Instead of use count, why length?
>> I see.
[00:04:32] Sometimes they're historical accidents, we're gonna look at at least one of those later today. Sometimes somebody just had to choose a name for things. There is a joke in programming that folks sometimes say, there are the two hardest problems in computer science are cache invalidation, which we're not gonna talk about today.
[00:04:55] Naming things, very hard. And off by one errors. [LAUGH] So naming things is extremely difficult and there's as many different opinions on it as there are people in the world. A lot of the time, the answer just like when you ask your parents why you had to eat your broccoli is because I said so.
[00:05:46] We said that we can get an element by its ID with document.getElementById. In this case, I'm looking for the element with id p1-name. What happens if I put .textContent after that? Any guesses or try it out and find out what is this gonna return if I do document.getElementById.textContent?
>> Your name?
>> [LAUGH] In this case, it might be my name. Yes, and more generally let's find out what's going on here. So if I do this, document.getElementById(p1-name).textContent, I get Anjana because that happens to be the text inside of the element with this ID. So, in this case, I have a span element with the Id p1-name, and inside of it is my name.
[00:06:44] And if I tried this with a different Id like for example p2 name I should get, Marc, so there is a corresponding element for the other player which has a span with ID p2-name, which has the text inside of it, Marc. So text content is the spell we can cast when we want to know what is the text inside of this element.
[00:07:18] So by this point you might be feeling like a very overwhelmed Steve Urkel in this gif like, this is a lot of stuff. We've just been firehosed going through a bunch of random things or they're not random, but a bunch of spells you might have to remember to interact with the webpage.
[00:08:09] Whenever you can't remember, what is it query selector or query selector was it getElementsBy capital I capital D, or getElementBy lowercase i lowercase d? Whenever you can't remember something, or you wanna find out more details about, wait, nodelist, what is that? HTML collection, what is that? How does that work?
[00:08:30] How are they different? Anything that you're trying to investigate, if you go to developer.mozilla.org, there will be copious amounts of information about it. So let us just check it out right now, developer.mozilla.org. MDN, resources for developers by developers. So let's say that I want to look up, I can't remember if it's query selector or query selector all, I type in query cell, and I start getting links to, okay, there is a query selector page here for document.query selector.
[00:09:13] And this tells me, this returns the first element within the document that bla bla bla bla bla. So this is where we can go and we're gonna be going a lot [LAUGH] if you asked me. And there are other websites that have information like this. But to my mind MDN is kind of like a really great trusted, comprehensive reference, for all of the things that we might find we need to work with as web developers.
[00:09:38] And they also have some kind of higher level guides about things like if we're wondering about the DOM in general, or the shadow DOM or other things we've heard of, or we saw once in somebody's blog post or whatever it is. We saw in the inspector, we saw HTML collection, what is that?
[00:09:56] The search box here is just your friend. And you can even set up a search keyword if you'd like to just really quickly search from your browser's URL bar. Any time you wanna find out about something like an HTML collection, let's say you can find it in MDN.
[00:10:37] You can always rely on your friend MDN to help you remember.