1 00:00:00,000 --> 00:00:06,750 Going forward, you're going to hear me say a certain acronym a lot: DOM. 2 00:00:06,750 --> 00:00:09,978 Dom de dom dom dom 3 00:00:09,978 --> 00:00:15,502 DOM stands for Document Object Model, 4 00:00:15,502 --> 00:00:18,907 and it's the way that browsers let us developers 5 00:00:18,907 --> 00:00:21,637 manipulate webpages with JavaScript. 6 00:00:21,637 --> 00:00:26,726 Whenever a browser loads a webpage, it parses all the HTML and CSS, 7 00:00:26,726 --> 00:00:30,236 and converts the document into a DOM. 8 00:00:30,236 --> 00:00:33,538 That DOM is really a big JavaScript object 9 00:00:33,538 --> 00:00:37,739 that contains everything we'd ever want to know or change about a page, 10 00:00:37,739 --> 00:00:43,201 like every single tag, and attribute and style for each tag. 11 00:00:43,201 --> 00:00:46,980 To access the DOM on a webpage from JavaScript, 12 00:00:46,980 --> 00:00:52,913 we use the global variable `document`, and then we can use properties 13 00:00:52,913 --> 00:00:57,520 and call functions that are attached to this object here. 14 00:00:57,520 --> 00:01:04,226 The general strategy for DOM manipulation is two steps. 15 00:01:04,226 --> 00:01:09,309 Let me just make a list of them here. 16 00:01:09,309 --> 00:01:14,759 Here we go, and then we have the second step. 17 00:01:14,759 --> 00:01:17,823 Let's go through each of these steps now. 18 00:01:17,823 --> 00:01:23,493 So the first step is to find the DOM node using an access method. 19 00:01:23,493 --> 00:01:28,969 If all we're looking for is the tag, we can access that really easily 20 00:01:28,969 --> 00:01:33,504 just by saying `document.body`. 21 00:01:33,504 --> 00:01:39,000 And now the second step is to manipulate the DOM node that we found 22 00:01:39,000 --> 00:01:43,386 by changing its attributes, styles, inner HTML, 23 00:01:43,386 --> 00:01:46,054 appending new nodes to it, ... . 24 00:01:46,054 --> 00:01:50,495 So if we just want to replace the contents of the whole tag, 25 00:01:50,495 --> 00:01:53,758 then we can use the `innerHTML` property. 26 00:01:53,758 --> 00:01:58,643 So `document.body.innerHTML = "Webpage be gone!";` 27 00:01:58,643 --> 00:02:01,758 Ta da, I did it. 28 00:02:01,758 --> 00:02:05,764 The browser is watching for changes to the document object, 29 00:02:05,764 --> 00:02:10,184 and as soon as it sees you change the innerHTML of document.body, 30 00:02:10,184 --> 00:02:13,450 it reflects it back in the actual document. 31 00:02:13,450 --> 00:02:17,778 Remember, the document object isn't the actual webpage, 32 00:02:17,778 --> 00:02:24,029 but the browser tries to make it reflect the current page as much as possible. 33 00:02:24,029 --> 00:02:28,609 Now, there are a lot more ways to do step one, 34 00:02:28,609 --> 00:02:32,794 because usually you want to find something besides just the body tag. 35 00:02:32,794 --> 00:02:37,663 Maybe you want to find a tag with a certain ID, or all tags of a certain type-- 36 00:02:37,663 --> 00:02:41,772 That's what we'll talk about in the DOM access methods tutorial. 37 00:02:41,772 --> 00:02:45,290 There's also a lot more cool stuff you can do in step two, 38 00:02:45,290 --> 00:02:49,135 like changing the attributes or styles of the tags you find. 39 00:02:49,135 --> 00:02:52,901 We'll talk about all that in the DOM modification tutorial. 40 00:02:52,901 --> 00:02:57,871 Once you've mastered DOM access and manipulation, we'll move on to fun ways 41 00:02:57,871 --> 00:03:02,735 to use it, like when responding to user events or making an animation. 42 00:03:02,735 --> 00:03:06,657 Right now, it is a little silly that we use JavaScript to do 43 00:03:06,657 --> 00:03:10,253 what we could have just done with HTML at the beginning, 44 00:03:10,253 --> 00:03:14,977 but trust me, you'll want to master DOM access and DOM modification 45 00:03:14,977 --> 00:03:18,893 so that you can make full interactive experiences later. 46 00:03:18,893 --> 00:03:25,277 So, keep it up, and see you soon.