[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:06.75,Default,,0000,0000,0000,,Going forward, you're going to hear \Nme say a certain acronym a lot: DOM.
Dialogue: 0,0:00:06.75,0:00:09.98,Default,,0000,0000,0000,,Dom de dom dom dom
Dialogue: 0,0:00:09.98,0:00:15.50,Default,,0000,0000,0000,,DOM stands for \NDocument Object Model,
Dialogue: 0,0:00:15.50,0:00:18.91,Default,,0000,0000,0000,,and it's the way that browsers \Nlet us developers
Dialogue: 0,0:00:18.91,0:00:21.64,Default,,0000,0000,0000,,manipulate webpages with JavaScript.
Dialogue: 0,0:00:21.64,0:00:26.73,Default,,0000,0000,0000,,Whenever a browser loads a webpage,\Nit parses all the HTML and CSS,
Dialogue: 0,0:00:26.73,0:00:30.24,Default,,0000,0000,0000,,and converts the document into a DOM.
Dialogue: 0,0:00:30.24,0:00:33.54,Default,,0000,0000,0000,,That DOM is really a \Nbig JavaScript object
Dialogue: 0,0:00:33.54,0:00:37.74,Default,,0000,0000,0000,,that contains everything we'd ever \Nwant to know or change about a page,
Dialogue: 0,0:00:37.74,0:00:43.20,Default,,0000,0000,0000,,like every single tag, and \Nattribute and style for each tag.
Dialogue: 0,0:00:43.20,0:00:46.98,Default,,0000,0000,0000,,To access the DOM on a \Nwebpage from JavaScript,
Dialogue: 0,0:00:46.98,0:00:52.91,Default,,0000,0000,0000,,we use the global variable `document`,\Nand then we can use properties
Dialogue: 0,0:00:52.91,0:00:57.52,Default,,0000,0000,0000,,and call functions that \Nare attached to this object here.
Dialogue: 0,0:00:57.52,0:01:04.23,Default,,0000,0000,0000,,The general strategy for \NDOM manipulation is two steps.
Dialogue: 0,0:01:04.23,0:01:09.31,Default,,0000,0000,0000,,Let me just make a list of them here.\N
Dialogue: 0,0:01:09.31,0:01:14.76,Default,,0000,0000,0000,,Here we go, and then we \Nhave the second step.
Dialogue: 0,0:01:14.76,0:01:17.82,Default,,0000,0000,0000,,Let's go through each \Nof these steps now.
Dialogue: 0,0:01:17.82,0:01:23.49,Default,,0000,0000,0000,,So the first step is to find the DOM node\Nusing an access method.
Dialogue: 0,0:01:23.49,0:01:28.97,Default,,0000,0000,0000,,If all we're looking for is the \Ntag, we can access that really easily
Dialogue: 0,0:01:28.97,0:01:33.50,Default,,0000,0000,0000,,just by saying `document.body`.
Dialogue: 0,0:01:33.50,0:01:39.00,Default,,0000,0000,0000,,And now the second step is to \Nmanipulate the DOM node that we found
Dialogue: 0,0:01:39.00,0:01:43.39,Default,,0000,0000,0000,,by changing its attributes, \Nstyles, inner HTML,
Dialogue: 0,0:01:43.39,0:01:46.05,Default,,0000,0000,0000,,appending new nodes to it, ... .
Dialogue: 0,0:01:46.05,0:01:50.50,Default,,0000,0000,0000,,So if we just want to replace \Nthe contents of the whole tag,
Dialogue: 0,0:01:50.50,0:01:53.76,Default,,0000,0000,0000,,then we can use the \N`innerHTML` property.
Dialogue: 0,0:01:53.76,0:01:58.64,Default,,0000,0000,0000,,So `document.body.innerHTML = \N"Webpage be gone!";`
Dialogue: 0,0:01:58.64,0:02:01.76,Default,,0000,0000,0000,,Ta da, I did it.
Dialogue: 0,0:02:01.76,0:02:05.76,Default,,0000,0000,0000,,The browser is watching for \Nchanges to the document object,
Dialogue: 0,0:02:05.76,0:02:10.18,Default,,0000,0000,0000,,and as soon as it sees you change the \NinnerHTML of document.body,
Dialogue: 0,0:02:10.18,0:02:13.45,Default,,0000,0000,0000,,it reflects it back in \Nthe actual document.
Dialogue: 0,0:02:13.45,0:02:17.78,Default,,0000,0000,0000,,Remember, the document object \Nisn't the actual webpage,
Dialogue: 0,0:02:17.78,0:02:24.03,Default,,0000,0000,0000,,but the browser tries to make it reflect\Nthe current page as much as possible.
Dialogue: 0,0:02:24.03,0:02:28.61,Default,,0000,0000,0000,,Now, there are a lot more\Nways to do step one,
Dialogue: 0,0:02:28.61,0:02:32.79,Default,,0000,0000,0000,,because usually you want to find\Nsomething besides just the body tag.
Dialogue: 0,0:02:32.79,0:02:37.66,Default,,0000,0000,0000,,Maybe you want to find a tag with a \Ncertain ID, or all tags of a certain type--
Dialogue: 0,0:02:37.66,0:02:41.77,Default,,0000,0000,0000,,That's what we'll talk about in \Nthe DOM access methods tutorial.
Dialogue: 0,0:02:41.77,0:02:45.29,Default,,0000,0000,0000,,There's also a lot more cool stuff \Nyou can do in step two,
Dialogue: 0,0:02:45.29,0:02:49.14,Default,,0000,0000,0000,,like changing the attributes \Nor styles of the tags you find.
Dialogue: 0,0:02:49.14,0:02:52.90,Default,,0000,0000,0000,,We'll talk about all that in the \NDOM modification tutorial.
Dialogue: 0,0:02:52.90,0:02:57.87,Default,,0000,0000,0000,,Once you've mastered DOM access and \Nmanipulation, we'll move on to fun ways
Dialogue: 0,0:02:57.87,0:03:02.74,Default,,0000,0000,0000,,to use it, like when responding to \Nuser events or making an animation.
Dialogue: 0,0:03:02.74,0:03:06.66,Default,,0000,0000,0000,,Right now, it is a little silly \Nthat we use JavaScript to do
Dialogue: 0,0:03:06.66,0:03:10.25,Default,,0000,0000,0000,,what we could have just done \Nwith HTML at the beginning,
Dialogue: 0,0:03:10.25,0:03:14.98,Default,,0000,0000,0000,,but trust me, you'll want to master \NDOM access and DOM modification
Dialogue: 0,0:03:14.98,0:03:18.89,Default,,0000,0000,0000,,so that you can make full \Ninteractive experiences later.
Dialogue: 0,0:03:18.89,0:03:25.28,Default,,0000,0000,0000,,So, keep it up, and see you soon.