This course is out of date and does not reflect Frontend Masters current standards. We now recommend you take the JavaScript: The Hard Parts course.
Transcript from the "Exercise 16: Solution, continued" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Justin Meyer: So back to this example, I wanna see if the childNode is a text node. So what should I do?
>> Speaker 2: Check if it has a node type material.
>> Justin Meyer: Exactly, so I'll do if(childNode.nodeType === 3). And then if it does, what do I wanna do?
>> Speaker 2: Get its text, and add it.
[00:00:33]
>> Justin Meyer: Exactly, how do you get its text? That's a great question. So I'm gonna look again [LAUGH] on my text node here, I can just create one in my watch.
>> Speaker 3: You can do a console.dir.
>> Justin Meyer: If it's the last thing.
>> Speaker 3: Or you could just do console.dir wrapped around that [CROSSTALK]
[00:00:56]
>> Justin Meyer: Okay. This'll give me the object, okay, that's cool. So this is gonna cancel to that dir wrapped around the whatever value you wanna look at. In this case, we can just look, so there's some properties that clearly have the text that I passed in. There's one data.
[00:01:17] There's one nodeValue, I think there's probably textContent. So there's a whole bunch, in this case, the best one to use is nodeValue, that'll work kinda everywhere. So that's where I can read the text of a node, is its nodeValue. So how do I add the text node's nodeValue to text?
[00:01:48] Some people actually might not know how to do this, it seems obvious, but if someone wants help me out.
>> Speaker 2: Plus?
>> Justin Meyer: Plus equals, yeah. Well, there's two ways of doing it. Probably the easiest way is for people to understand is txt + childNode.nodeValue.
>> Justin Meyer: So that's gonna get the text nodes.
[00:02:15]
>> Speaker 4: Old English.
>> Justin Meyer: Yeah, [LAUGH] only all the old English text nodes, yeah. This is gonna get the text node's nodeText and then add it to our kind of accumulator of text. When you guys do recursive functions, sometimes you'll hear there's like an accumulator, that's kind of how I refer to the thing that you're starting to like add to a lot of times.
[00:02:40] Okay, so we've handled if there's a text node, but if we get something that's not a text node, it's gonna have a nodeType of 1, that's a normal node. What should we do? And this is for the big fake bonus points,
>> Justin Meyer: Big bucks that I will not pay out.
[00:03:08]
>> Justin Meyer: How can I make this work, so I don't have to iterate myself?
>> Speaker 2: You can call a getText again.
>> Justin Meyer: Yes, exactly right. I'm gonna call getText again. What am I gonna pass in?
>> Speaker 5: The children nodes of that node.
>> Justin Meyer: childNode, exactly. It's gonna return something.
[00:03:36]
>> Speaker 2: You're gonna add it to your accumulator.
>> Justin Meyer: Exactly.
>> Justin Meyer: Okay.
>> Justin Meyer: So not only did we learn a lot of JavaScript and we're learning jQuery now, we've also done a decent amount of recursive programming.
>> Speaker 6: There's a quick question I think about, what does that nodeType equal to 1, what does that mean?
[00:04:07]
>> Justin Meyer: The nodeType, again, is just a listing of, different types of nodes have different nodeTypes. For instance, if you have a comment, I don't know if you guys have ever seen a comment in html. You can actually have HTML comments that look like this. I'm a comment, that is actually going to be a child node of the body in this case, even though there is no real body.
[00:04:33] If I were to put that inside this ul, the ul now would actually have, we have four, eight, you would have nine total nodes cuz there would be a text node here. A comment node, which is, I think, is node type something, I don't know, [LAUGH] you can actually look up node types.
[00:04:55] By the way, if you're wanting to find information about the dom, use MDN really exclusively. Don't use, what's the other site that's?
>> Speaker 3: W3Schools?
>> Justin Meyer: Don't use W3Schools, use MDN. So anything you wanna ever know, type MDN and then type in nodeType to Google. And this is where you get actually very well done, good technical information.
[00:05:20] So here's all the different nodeTypes. And they'll let you know which ones are not, I think, well supported, or we should-
>> Speaker 5: Comment node is eight.
>> Justin Meyer: Yeah, comment node is eight, a normal element node is one, text node is three. The only ones that you'll typically see day to day, element nodes, text nodes, sometimes a comment node.
[00:05:43] And I see document fragments a lot, which we're not gonna hit today. But document fragments are, if you ever find yourself building a lot of dom, and it's not going very fast, look into document fragments. Remember that word and then learn about it later. [LAUGH] Talk for another day.
[00:06:03]
>> Justin Meyer: Okay.
>> Speaker 7: So sure, can we handle other nodeTypes?
>> Justin Meyer: No, we only need to go. No, your code does not need to handle that. And plus, other nodeTypes won't have children that would have text nodes. So a comment node isn't gonna have a child that's a text node.
[00:06:18] So we don't need to recurse through that, we can just ignore that. We can ignore every other type of text node, or every other type of node, which we're doing here. So, that's what that three-in-one means, based upon. Now there is a flag, sometimes people don't like writing that because they feel, hey, that's hard to understand.
[00:06:43] So there is instead of writing a one or three, what you'll see in a lot of open source code, people will write, was it Node.TEXT_NODE?
>> Justin Meyer: Because Node.TEXT_NODE returns 1, and this way, you can kind of write your code a little bit more clear, I think. But I mean, depends on what circles you're running in, most people who do open source would just, you'll see text node.
[00:07:20] You'll just see a three, and people will know that it's text node. But if you're working with people who might not have seen that before, writing it out like Node.TEXT_NODE, so it's explicit, and Node., what was it?
>> [INAUDIBLE]
>> Justin Meyer: ELEMENT_NODE,
>> Justin Meyer: Might help people out quite a bit cuz if you've never seen this before, it'd be super weird just to see a three without any context.
[00:07:51] Cool, so that's it. That recourses, let me step through it once. So you can see it working. I wanna put a debugger in here. I'm gonna reload my breeds, I'm going to open up the jobs for council. And I'm going to do $, my ul, and I'm gonna call text.
[00:08:23] And I get an error. [LAUGH]
>> Justin Meyer: What did I do?
>> Justin Meyer: Did I break something? Yes, I did. What did I break?
>> Speaker 2: Should it be else if?
>> Justin Meyer: Yes, thank you, syntax error.
>> Justin Meyer: That's why peer programming is awesome, especially when you're peer programming with like 20 people [LAUGH] and 60 online or whatever.
[00:09:03]
>> Justin Meyer: Okay.
>> Justin Meyer: Console, clear u, escape u, okay. Which I think I'll just pull this whole thing up, but once I get the, all right. So here, we got into this first getText call, which I can just show. So we're passing it. So we get this return, making sure it's got a first element and that we're calling getText with element as the ul.
[00:09:41] Set a break point in here. Hopefully it hits that, it did not. Why did it not? I'm gonna have to put a debugger in here too. Chrome is being weird, [LAUGH] deubber, debugger, all right.
>> Justin Meyer: In my code, okay. So it's gonna be called with the ul.
>> Justin Meyer: I want to get a step over.
[00:10:18] So el is going to be the ul. Let me hide this console, how do I make you go away?
>> Justin Meyer: And it's gonna start. It's gonna create an accumulator, and then it's gonna step into this. And it's gonna get the first child node of the ul, which is a text node, you can see here cuz it has like a return character in its data.
[00:10:42] And we're simply gonna say that a, its nodeType is 3. And we're just gonna add two texts. So we're gonna do txt = txt + the node value, which is a line break followed by some space. If we walk up to our parent call object, we can see text is going to change to have that text in it.
[00:11:07] So now we're gonna hit the next element, which is going to be an li. Come on, it's gonna be 1, and it's gonna step in, so it's gonna step into this call is function again, which is gonna have its own accumulator that's gonna go through all of the li.
[00:11:30] So let me write the childNode.nodeName. So we can just see what we're going through here. So now we're going to do the li's first child, which is an anchor, and I'm gonna set a breakpoint here, so we can see what's being returned. Now we're gonna hit the second li, and we're just basically recursing down.
[00:11:56] This is the first anchor's text, which is going to be Doberman. And then we're gonna kind of keep walking up, that's gonna be returned. How do I get to that? Nope, one more level. Okay, so now that value was returned, and our text should be the first return before the Doberman and then the text of the anchor.
[00:12:21] We're kind of recursing down.
>> Justin Meyer: I don't know if I need to keep showing this. Cuz this is kind of hard for me to even follow. [LAUGH] I think it's just easier to look at the code actually, but essentially, we're just keep calling, going into getText and getText down.
[00:12:39] So hopefully, that makes sense. Let's move on, any other questions about this? Yeah, I'm gonna remove my debuggers.
>> Speaker 6: There was one [INAUDIBLE] back. What do you mean by past looping benefit from detaching the elements from doing the dom manipulation on used in the same way, like in other words, what is the best to temporarily remove elements from the dom?
[00:13:06]
>> Justin Meyer: So it's best when you're manipulating them. It can be sometimes a good idea when you're manipulating them, but in this case, we're not actually manipulating anything. We're just reading. I'm answering this to you, here's the question. We're just reading property, so we're not actually changing anything. So we're not gonna create any reflows or anything like that.
[00:13:31] So it's best not to be removing it or anything like that, especially forget. Yeah.
>> Speaker 5: In my text function, I'm doing everything that we're currently doing, but I'm getting an error.
>> Justin Meyer: Okay.
>> Speaker 5: On the test page, it says the appendChild is not a function.
>> Justin Meyer: Let me make sure my test is passing, that I didn't just give you guys some bad code, and then we'll take a look.
[00:14:03] So my test is working. It says appendChild is not a function, down in this?
>> Speaker 5: Yep, right there where we have appendChild.
>> Justin Meyer: What is el look like? So if you step in, if you were to put a debugger, right, or like a console.log(el), is that undefined? And then if that is, what I would do is console.log(this) to make sure that there's like an li, right, I'll show you what mine looks like when the tests run.
[00:14:37] So you can, by the way, for these tests, you can just click on the individual tests and run just that.
>> Speaker 5: Span.
>> Justin Meyer: So mine will look like,
>> Justin Meyer: This. Yes, span is gonna have, looks like the first time it's called, it's gonna have a collection of one item that's a span, and then it's gonna look apparently like that.
[00:15:06] Is that what yours looks like, you're still getting an error?
>> Speaker 5: Mine is just an empty span, I think.
>> Justin Meyer: An empty span. Okay, let's do the same type of thing, like I'll help you and if it's like something else, I think other people would have had a problem with, I'll come back after the next exercise and explain it.