.length & .textContent

[00:00:00]
>> There's another thing that we're gonna be typing a lot [LAUGH] in JavaScript, which is .length. So we noticed that when we did our query selector all, we got something called a node list. When we did our get elements by tag or class name, we got HTML collections.

[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:00:46]
>> We're gonna dig into this a little bit. I'm gonna maybe put a small pin in this question. But essentially, what we have in our document are complex entities that represent the elements in the page. And JavaScript takes each of these elements and kind of wraps it in something that allows us to interact with those elements.

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

[00:02:20]
>> 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.

[00:03:43]
But if you want to find out how many things are in a collection of things in JavaScript, often you have this .length spell you can cast to find out how many things are in there, cool? Awesome, we're gonna be seeing .length a lot, so get friendly with it.

[00:04:07]
>> Instead of use count, why length?
>> Why length, why not count? Remember how I said that JavaScript was initially developed in ten days? [LAUGH]
>> I see.
>> And also the JavaScript has vastly exceeded the expectations that were created around it when it was developed. So there are a lot of things in JavaScript as in any programming language, that are honestly just kind of arbitrary choices people have made.

[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:20]
[LAUGH] Or because in this case, somebody who implemented this feature said so. We are gonna talk later about how you can choose the names for things in your own JavaScript program. So then you get to be the decider of what things are named. Okay, let's continue with our domming through the DOM here.

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

[00:06:07]
>> 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:07:37]
Do I expect you to remember all of the stuff that we just ran through? Definitely not. There are three letters in web development that are the most [LAUGH] important letters If you ask me, and they are M, D, N, stands for Mozilla Developer Network. This is a website that I had to hold myself back from saying is the website I love earlier today that is going to, in my opinion, help just unlock so much of not just JavaScript but web development in general.

[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:13]
So if you take away nothing else from this course, [LAUGH] I hope you take away that you can go to this website and look up whatever you want about JavaScript, about HTML, about CSS, how they interact, all of that stuff. So we're gonna be referring back to this multiple times in here, and this is why you don't have to hold all of this information in your head.

[00:10:37]
You can always rely on your friend MDN to help you remember.