Looping Over Query Results

[00:00:00]
>> Speaker 1: There's a question about the query selector all and the array, how you loop through it?
>> Brian Holt: Sure, so let's see, there's a bunch of h1s on here, right? So I think these are, no these are h2s, I think actually. So these are h2. So if I come in here and say.

[00:00:25]
>> Brian Holt: Let h2s = document.querySelectorAll and I wanna get all of the h2s. I'm gonna ask for just h2 with no period, right? That'll give me the tags back. And so now in h2s, I have a bunch of h2s like this, right? First thing you might ask me is that's not an array, that's a node list.

[00:00:52]
That would be an astute observation. So it's not technically an array, it's array-like and it's annoying. That's all I can tell you right now is, it's really annoying, but it's not. So for example, if I wanted to do map or forEach, it doesn't work on node lists which is a bummer.

[00:01:13]
So you have to use a For loop. So now, I have a node list of these. So I can say for(let i=0 is less than h2s.length; i++. And then I could say, h2s(i).styled.color =, how about, what's another favorite color. How about papayawhip, that's another favorite color. I'm not making this up, these are actual colors in there.

[00:01:57]
So now I notice they pretty much dropped off the page, cuz that's the color papayawhip or you can do red. So you can actually see it. So hopefully that answers your question about how to interact with node list as you just have to use a for loop to a loop over them and then you can interact with them individually like that.

[00:02:17]
Other questions?
>> Speaker 1: Someone saying you can use array.from, so you can do for each.
>> Brian Holt: Yeah, I didn't know how deep in that rabbit hole we can go. So you can do x = Array.from is really new JavaScript. And now, x is actually an array.
>> Brian Holt: So now you can do for each and map, and all that kind of stuff.

[00:02:46]
Array.from is you give it some sort of array like thing and it turns it into a real array for you.
>> Speaker 3: How common is doing stuff like this? Would you often be changing stuff on a website via JavaScript, every h2 tag or every div?
>> Brian Holt: It's gonna depend on what technology your website is using it.

[00:03:12]
For me, I tend to use a higher level abstraction. Something like angular or react, or view, or one of these frameworks that's built in JavaScript. In which case, I never do anything like this, right? Because basically, the framework handles all of that low-level interaction for you. This is the JavaScript equivalent of working on the metal, right?

[00:03:32]
We're directly interacting with the browser. Normally, there's a layer between you and the browser. Normally, I don't know if I want to say normally. But for example, I know Mark in particular loves interacting directly with the browser, right? So he doesn't use any frameworks. He's just directly in there just flipping all that stuff himself.

[00:03:48]
So, I'm gonna say, if you get a job at most bigger companies, not night off, not excuse me, not often. Because in general, you're gonna be using some sort of framework. But I will say that I believe it's quite vital for you to know how to do these things, because it will make you a better programmer.