Now we're going to talk a little bit how we manipulate the Document Object Model from JavaScript. And so here we are in our happy little Request Response Cycle. And so the Document Object Model, of course, is how we out here in the real world, we view web pages, right. That's what we're seeing. So what we're going to see now is we're going to have a Request Response Cycle that's going to write to have JavaScript in it but that's no big deal. You'll notice that all these files I'm playing with now are HTM files. So they're static files they're not even running on the server at all. But inside they have some JavaScript. And now we're going to look at how JavaScript can look at things from the Document Object Model. Look them up and pull them out and then put stuff back in the Document Object Model. We've already saw how you can use document.write() to append to the Document Object Model, and we see these things. And so this is the core essence of interactivity that does not require Request Response Cycles, when we can manipulate the Document Object Model interactively in JavaScript. Now in the next few lecture we're going to come up with all kind of ways which JavaScript is going to talk to the server and then update the Document Object Model but for now we're really just going to focus on this bit code right here with JavaScript is manipulating the Document Object Model. And not worry about the other cool things that JavaScript can do. Okay, so the Document Object Model has been around since the beginning of time. And when JavaScript was created the Document Object Model existed. The problem is in 1995, all these browsers kind of evolved independently. They all had sort of an internal data structure for how they would represent HTML once they parsed it, but they weren't the same. And so because the inconsistent is a Document Object Model. And because they knew that they could never get JavaScript out, if they set every Document Object Model has to be the same. They didn't force the Document Object Model's shape. The structure of what's a child of what, inside the Document Object Model. They never force that to be the same. Okay, and so there's other ways that we have to go look things up. You can always look things up but that's not as portable. So, like I said, not all browsers represent their page exactly the same way and in old days we'd write JavaScript code and then we have to debug and said in IE 7.3.1 You just blew up, but everything else works. And Firefox works, this works, and that works. That's less of a problem these days, but we will see. And so we would end up with bugs that are just like, this thing works on everything but Internet Explorer. Blows up, and no options display. And this would be an example where you're writing code as a developer, and you tested and tested on Firefox, but then you put it in production and someone used Internet Explorer. That happens all the time. And it's very, very, very frustrating. But, it's still important to be able to do basic, simple things to the Document Object Model. And so what they did is because the shapes weren't the same, and so what I mean by shape is this comes here, the document and the forms are down here, and the iframes are over here. What comes underneath these things? And there was a hierarchy that you could go like DOC.X.Y.Z[4], and that might be the fourth form or something, right? But the sequence of these things is different. So the shapes in IE, Internet Explorer, or Chrome, or whatever, had different Document Object Models. because that was sort of treated as just a thing that the browser was allowed to do. The developers of the browser were allowed to architecture their own Document Object Model, based on what they thought was the coolest thing to do. And so the idea was that in the early days of JavaScript they said we are not going to standardize the document model, but what we want to do is we want to be able to find something deep in the Document Object Model independent of, we don't know what the shape is, but if we can mark this one with id="bob". Then I want to be able to grab this little thing, not knowing where it fits in the tree. But if we put an id tag on it, and that is a function that was built into all the object models called getElementById. So instead of going and starting a document and working your way down, you just say look I don't care, you go find the one that has id="bob". And so that's called getElementById. So what we do is we use this id tag. And we've seen this in CSS. We've used this in CCSS as well. But we also can use this in JavaScript as a way to distinguish a particular tag. Now there's the class equal and the id equals. You can only have one tag in an entire document that has the same id. So id equals person, there can only be one tag that has an id of person. So we are marking somehow this text, Chuck. Okay, and saying, so this by the span tag is just a tag that does nothing. All we're doing here by putting an id on is giving us a handle for that text. And so now what we can do is we can come into our JavaScript and we can say document.getElementById('person'). And that says, go through your whole Document Object Model, wherever that thing's at. And find me this tag. So this bit right here, that bit right there is what you get. You get the tag span id=. It's not the text, it's not Chuck. And if you want to go down, and you want to go deeper to get just this bit. Then you say, .innerHTML so that pulls this stuff out. And so that's where it says string equals Chuck down here. So it's actually pulled the actual text. You go find the tag and then dive into the tag. And sometimes the tag itself has children in it. So sometimes it's quite complicated, but in this case I just had a span tag with some innerHTML and away you go okay? And then It doesn't have to be that we just, this is basic looking something up from the Document Object Model. And then I can console log it at console.dir, the disk shows us this and it's really nice because then you can expand this. And you can see all the little details that are in that tag. And that's a good way of debugging and then writing code. And then I can actually change it, so I go document object and HTML so this actually is a handle to this Chuck text, whatever's between those span tags and then actually rewrites the Document Object Model and puts Joseph in there instead. So if you were to see that you'd see Joseph on the screen. And so, that's what you see afterwards, right? And if you can expand that document.dir, this is what's quite nice about this, is the console.dir. I think console.log because roughly the same thing, if you like. It gives you this, and you can look down through things and scan. And that's how you can find things like innerHTML or whatever because you can see all this things and child nodes for example is if our span tag which is in the Document Object Model somewhere this is our span tag, that's our span tag it can have child nodes that go within it. So that would be span within something. And so here's a little bit of code that is JavaScript that's running an onclick where, and again, when you start doing JavaScript in the browser and you want to mess with the DOM you tend to Add id's on tags to give yourself handles to various pieces so you can change them, delete them, put new stuff in them. And so here's the span on this string stuff, right? The string stuff right here, I've got a handle id="stuff". So I can grab this tag document id, this is a an onclick for this Back button. This 'BACK' is onclick that runs this JavaScript as soon as I click on Back it's going to run this code. And it goes, grab that tag, and then take the innerHTML tag and stick BACK in. So that basically puts B-A-C-K. So if I press Back, this DOM, without going to the server, this DOM just changes to BACK. And if I click Forth. Click this Forth, which is this Forth. Then that goes and grabs this same thing, and then the innerHTML is changed to FORTH. So that wipes that out. FORTH. And it looks like that. So you can go Back, Forth, Back, Forth, Back, Forth, Back, Forth. And this stuff is just changing. And this is just really simple basic browser interactivity. Here's a little bit of code that's a little more complex, that's manipulating the Document Object Model. And so, what we're going to do is we're gong to have this little more tag, and we're going to have onclick method. The href means, that's a way that we say don't load anything, that it's not really a link to anywhere. It's an interactive thing, it's going to make something happen inside this document. And so whenever we click on that we're going to call the add function in JavaScript and then return false to avoid going to some page, right? And so now what we're going to do is this is all just HTML at this point. HTML, HTML, HTML and we're going to make a ul tag and we're going to put an li tag in there. First item so if you first look at this page you'll see that and nothing else and then we're going to having some JavaScript So in this JavaScript, we're going to set a global variable called counter to be 1. We're going to do console.log just for yucks. And then we're going to create this function called add. And this function called add is going to be run every time we click on that. So it's going to click, run add, return false. Click, run add, return false. So every time we click on this what it's going to do is it's going to do a document create element. So what that does is it creates an li tag, /li. That has nothing in it but it's not connected anywhere to the Document Object Model. You can give it a class. This x is this thing. You can put a class equals on it. Okay, put class equals on it, that's what this does. Now we can set the innerHTML to be the counter. And then whatever this variable is, counter. And then add one to it, well. Then what we're going to do is we're going to graft it in, so we're going to grab this li tag, a ul tag which is this tag right here, and we're going to add a new child. So the way think about this is the ul is the parent and the li is the child. What we're doing is adding another child to it, another li tag. So this was the li tag we kind of made out here and then we connect that li tag to this ul tag. Then, we add one to the counter. So the counter equals one. Then we would do this again, every time we click this it is going to run this over and over again. So a new li tag gets added, every time we do this. And there is no request response cycles going on. We have the DOM and we have JavaScript and it's just changing the DOM and as soon as the DOM changes, you see this. If there was stuff down here, it will get reformatted and moved down. And so you change the DOM, it reformats, it rejustifies, it does all the kinds of things that is going to do. And so this is an example of generating dynamically some HTML that we can see by manipulating the DOM and doing various things. Now, that's how we did it in the old days. That's 1995 to 2005, 2006. For ten years, we wrote code like that. And the problem was is it wasn't portable. And it was kind of just long. Lot of little details, but you can do it. But, it was so clunky, and there's so many things, and as we went to build cooler interactivity it got, the amount of code you had to write just got bigger, and bigger, and bigger. So, a series of libraries in the mid 2000s, 2004, 2005, 2006 came out, that tried to make job descript in the DOM, a more functional way to write code. And a number of them came out, Mootools, Prototype, but the one that everyone loves now over ten years later is called jQuery. And so what jQuery did is it solved two problems, it made messing with the DOM really easy and portable, So jQuery knows all the browsers, and all the quirks of all the browsers, and you say, in jQuery, do this. Go find this tag and do this to that tag. And if there was something you had to do for a particular version of a browser, jQuery would worry about that. And so, jQuery solved the portability problems, they solved the DOM differences, the underlying functions. Things like how wide is the window? It used to be you'd have an if statement in this much code to figure out how wide the window was. Whereas in jQuery, you're like, how wide's the window, and it has the if statement in it. So it's really amazing. And we really, at this point, it's rather rare to do anything other than the simplest kind of manipulation. And the DOM without using jQuery, so many people just assume that jQuery is always there but it wasn't always there, it wasn't there in the first ten years and it was so painful in that first ten years that things like jQuery had to be built. And so, when we start talking about jQuery well, I'm not going to do much more on DOM manipulations until we start doing that with jQuery. So, this is a quick run-through JavaScript. How we can write code with the basic syntax and languages all the way up through manipulating Document Object Model using kind of early version, the first ten years of JavaScript. And you still do that. Sometimes you want to keep your page really small and you only want to do a tiny little thing so you can revert back to getElementById, and that kind of activity. Especially as old browsers go away the portability issues are less and less of a problem. But as we really start playing with the Document Object Model, we'll play using libraries like jQuery.
