Advanced JS Fundamentals to jQuery & Pure DOM Scripting Exercise 16: Implementing the text() method

Transcript from the "Exercise 16: Implementing the text() method" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Justin Meyer: The next thing, and this is gonna be a trickier one. I said there's two hard ones. This is the second harder one, I think.
>> Justin Meyer: We're gonna add a text method that you can get or set the text of an element. So if I were to get the text of a ul, which the ul in our page, which I'll show, it'll return a string with just the text node content, so Doberrman, Beagles, Boxer.

[00:00:35] And if I were to set an element, it will set just the text of it. This is different than setting the HTML. See, if I'm setting text here as TEETH, if I put in stuff that looked like markup, well, you would actually see in the page, not in the source, markup.

[00:00:52] It'll get escaped correctly, so you see it. Let me walk through a little bit more explanation of what text nodes are, so that you can understand how, cuz understanding that there's text nodes is important to solving this exercise.
>> Justin Meyer: So let me inspect this element.
>> Speaker 2: There's a question that just came in.

[00:01:18] Why can't we do this equals new dollar sign selector?
>> Justin Meyer: Yeah, so this is, okay, so someone asked, why can't we do this equals new selector in here.
>> Justin Meyer: The reason is because, think about how your new operator works. Your new operator just calls, if you remember the new operator from what we did yesterday.

[00:01:55]
>> Justin Meyer: The new operator creates an object in memory, and then makes sure that that constructor function calls, makes sure that the constructor function's this points to that newly created object. So it's gonna create a, this code in here is really, when it's gonna call that constructor function, it's gonna call it with this pointed to some object that it created.

[00:02:25] Now, if in my jQuery JS, if you had this code here, all that's doing is pointing this to some other object that it's created. This in the context of this function running. But it cannot reach back into here and somehow change o to be returned to some other value.

[00:02:58] It can't do that. Remember, when you set, this is just like any other variable, really. We have in, this function right here has a this, and it's also gonna have an elements.
>> Justin Meyer: What this means in this function is local to that running of this function. It's local in this call object.

[00:03:24] So setting elements, changing what this is won't change what is returned by the outside world. It won't change the behavior of what o is in here. Hopefully that makes sense.
>> Justin Meyer: Okay, so let me get back to talking about text nodes. So, you can see here I have a ul, and it's got these three lis in it.

[00:03:58] How many child nodes does this ul have?
>> Justin Meyer: It's a trick question. It does not have three.
>> Speaker 3: It has six.
>> Justin Meyer: Close.
>> Speaker 3: Seven.
>> Justin Meyer: Seven.
>> Speaker 3: Yeah.
>> Justin Meyer: Can you tell me why?
>> Speaker 3: The three li's, and then the four text nodes surrounding each li. So there's one at the top, then in between, and then one at the bottom.

[00:04:32]
>> Justin Meyer: Exactly. So let me show with that. So here's my breeds HTML. So, you might think like, hey, the ul is gonna have three child nodes. But in fact, it's gonna have seven, cuz it's gonna have a text node that's created for the text of the line break, and any space and tabs right here.

[00:04:53] And then it's gonna have an li as a child node. It's gonna have another text node right here, an li as a child node. Another text node here, and an li as a child node. And then the seventh text node right here. That's the actual structure of the DOM.

[00:05:09] And you can see this in your debugging tools. If I were to go to this ul.
>> Justin Meyer: And look at Properties, and look at-
>> Speaker 3: childNodes?
>> Justin Meyer: childNodes, thank you, went right past it. You can see, there's seven child nodes, text, li, text, li, text. And these lis will each have text nodes as children.

[00:05:38] This text is gonna look just like, you can see, it's got a line break and space. So jQuery's text node, when you try to read, if we were to read the text of this ul, what it needs to do is recurse down through every text node, so it's gonna get all the text nodes.

[00:06:00] It's gonna get all of these text nodes. But it's gonna also recurse down through every li and get all of their text nodes. And then through the li to the anchor, and the anchor is gonna have a text node, and get these text nodes. So this is the last, I would say, pretty hard exercise.

[00:06:24] I would say, let's split it up in two. Let's do the first part is actually easier, so we'll do that first. We're gonna do the setting, and then we're gonna do the getting. So to set ul, if we wanted to set ul's text, that's really easy. I can just create a text node, and you can create a text node.

[00:06:49] You might have seen document.createElement, that creates an element with whatever tag name you want. So if I want to create a div, I can create one like that. But I can also create a text node. And I can give it the text of the text node. I can say, like, hello, world.

[00:07:10] Now I could get my ul.
>> Justin Meyer: Did I write something wrong? All right, maybe I didn't save it. There we go, cool. So I get my ul. Have I been doing something wrong?
>> Justin Meyer: I have, hold on one second. I have something breaking here. This thing. There we go.

[00:07:48] It gives errors on you if you try that.
>> Justin Meyer: Perfect, okay, so I have my ul, and I'm gonna create my text node.
>> Justin Meyer: And what I can do is, I can just simply wipe out my ul's text, HTML. So, I'm gonna choose a little shortcut, I'm just gonna blow away all of its HTML.

[00:08:15] And now my ul is empty. As you can see on the left, it's gone.
>> Justin Meyer: And you can see it in the DOM as well. And then what I'm gonna do is append to my ul, actually, I'm supposed to keep this up high as I can. I'm going to append to my ul.

[00:08:35] Let me grab my ul. Let me grab the raw element. And I'm gonna appendChild my text node that I created. And you'll see, hello world was added here. The cool thing about text nodes is that they'll automatically escape any text you put in them. So I put a bold in here in the text node.

[00:08:59] But if I were to append that again to my ul, now it's got two text nodes. But if we look on the page, it doesn't actually put markup, it escapes the markup, so you see it like this. So the first exercise we're gonna do is to take our dollar text, and we're going to have something if arguments.length, and then we're gonna do the setter.

[00:09:30] And the setter is gonna work just like all of these setters, except it's gonna create a new, it's gonna empty the inner HTML of each element, loop and, set the innerHTML of each element. Or, clear the. Set the innerHTML to empty string. And then it's going to create a text node and append it to the element.