HTML The DOM

Welcome back to Educator.com.0000

We are going to look, really quickly, at the DOM today--just a basic introduction to it.0003

Most of the time, when you will be needing to know about the DOM, you will be using JavaScript.0007

But it is important to know what the DOM is, in order to make sure that,0011

when you do start using JavaScript, your HTML is going to be a framework that performs as expected0017

when you are using the JavaScript to navigate through the DOM.0024

DOM stands for Document Object Model, and it is the layout of all of the elements in the entire web page.0028

In a way, it is a logical layout that JavaScript creates, that it knows how to get to each node.0037

For the most part, it is just going to be important when you are dealing with JavaScript,0045

to interact with elements, or change elements, or just grab information from elements.0049

The DOM tree is built starting at the beginning of the HTML page with the HTML tag, or element.0058

And it goes through and just reads it linearly, one character at a time, from beginning to end.0066

And for every element that it runs into, it creates a node.0074

And then, when it runs into a child element of that, it creates another node; and so on and so forth, all the way down through the entire document.0078

It parses through and creates a big tree, sort of like a family tree.0087

This is a very basic example of a web page with some HTML.0092

And this would be what the tree would look like.0097

So, you have HTML at the root; and then you have two nodes here, head and body.0102

And an interesting thing about the DOM is that just regular text actually becomes nodes, as well,0107

so this text here, "Hello World" that is inside the title, actually becomes its own node, so that it is a child of the title element.0113

And the same thing down here: this word "Hello" becomes a node on its own,0122

then the em element, "World," and then this exclamation mark here also becomes a node.0127

For the most part, whitespace gets ignored.0133

So, the vocabulary to know is the tree (which refers to the entire document--the whole DOM tree--you are going to have one per document).0137

The nodes are each of the elements that the DOM creates as it goes through.0147

A branch would be, say, right here--this head--all of the things under the head are a branch coming out.0153

And then, the same thing here under the body--this is a branch.0159

Parent and child--just the standard relationships, going up and down; up is a parent; child is everything below it.0162

So, this p element has 1, 2, 3 children--three direct children, although this is also a descendent.0169

When you are talking about children, when you are navigating the DOM, usually you will want to get0178

a parent node, and then child nodes, because there is going to be an array of nodes.0186

There are a couple of ways to explore the DOM; let's look at some HTML really quickly.0196

This is a little web page that is just very simple; it is just two paragraphs--this one (with a little bit of emphasized text) and this one.0203

And you can explore the DOM in any page really easily in any browser that has an inspection tool.0213

Firefox--you can install the Firebug plug-in, which is really useful.0223

Chrome and Opera both come with an inspection tool that is automatically loaded.0228

So, this is Opera; and this is that web page that I just showed you.0232

Now, if I right-click on this heading right here, and then go down to Inspect Element and click on it, it is going to load up the inspection tool. 0248.1 And down here, it is actually showing (I am going to move this out of the way, because you don't need to think about this):0237

this is the document object model; this is the DOM tree for this page.0253

It is very simple; and you can see that it automatically collapses everything up.0259

And right now, at the root, you just have HTML.0264

And as you expand in, the head--if I click on it, the highlighting disappears, you will see, because the head is not visible in the page.0267

But then, if I click on the body, it highlights the entire content of the page.0277

And you can drill in, so this would be a first-level heading.0282

And you notice, I clicked on the little + to expand the content.0288

This browser conveniently clumps them together, even though they are separate nodes;0293

people don't tend to think about them that way, so it is very convenient that it puts it out like this.0299

And then, these two paragraphs are inside of a little div element.0305

And drilling down, you can see how this paragraph is broken into two parts.0312

And you can't actually read the text that is inside this em tag, because it is inside the tag.0319

This is the way that JavaSript is going to look at the page.0327

And you can use JavaScript to add nodes to the document on the fly, just going in and navigating around,0330

and creating or removing elements; and that will dynamically update.0340

There are a couple of other tools besides this Opera one I just showed:0347

I mentioned Firebug; any built-in browser inspect tool, like Chrome and Opera have...0354

Manually, you can open up the source to a page, and you can logically deduce what the DOM structure would be.0362

It usually follows the way that most people indent.0372

You see here: I have put one indentation here.0378

Everything that is one indentation from the HTML root element is a direct child of the HTML.0382

So, that is just head and body, all the way down.0388

And this is indented incorrectly; that should be tabbed over, and all of these should be tabbed in a little bit; now it is properly indented.0392

And then, you can see that this h1 and this div are the children of the body, etc., etc.0407

Now, this breaks down when you get to the text-level areas, usually,0414

because it is kind of awkward to take an element like this and put it out on its own line and indent it,0417

and then do the same thing with the text--although sometimes you will see indentation done this way.0422

This would be the way that, if you were thinking in terms of nodes--this would be the node indentation.0428

And I could break this out onto its own line, as well.0434

And you could do it so that every single line would be its own node, and then the indentation0436

would indicate how many nodes deep it is, or how many parents and descendents it has.0442

The last way to navigate through the DOM is through JavaScript.0449

And I am not going to go into detail on that right now.0455

But JavaScript has methods built in for you to, say, look at a node, and then move up a level,0458

move down a level, move into the children--you can say, "Go down to the fifth child of this element," and so on.0465

All right, and the last thing about DOM that I am going to talk about is just some basic introduction to some of the techniques.0474

There are multiple types of DOM's; it is very old technology.0488

But it started out just very simple--you could call it DOM 1.0.0495

It was basically like this: you have the documents (and this would be JavaScript, by the way), and then you set forms.0500

This would be if you were looking at it to target a particular form element.0508

And then, this bracketed area here indicates which form in the page it is.0512

So, if it is the first form, it would be 0, because computers count up starting from 0.0517

And then, it looks at all of the elements in the first form of the page.0522

And then, you can count through to the element that you want.0528

In this case, it would be the first one, again.0530

And if you had multiple forms on a page, you would put a different number here.0532

And if you wanted to get it the fifth element in a page, then you would put number 4 here, because it would count up to 4; that would be the fifth element.0535

And for a long time, that was the only way that you could really navigate through the DOM.0545

And that can be problematic, because especially nowadays, we have JavaScript and a lot of other applications0549

that are dynamically modifying the contents of a page.0557

So, what was the first form might no longer be the first form, after some changes take place.0561

It is also difficult when you are dealing with--say you have a little PHP script that is inserting a form into multiple places on a website.0567

And it could show up in all sorts of places; and it might show up in a page that has a form already in that page; or it might show up as the first form.0579

And so, this number is going to change, depending on which page it is showing up in,0587

which means you have to make your JavaScript different for every single context.0592

And it is not always easy, when you have a dynamically created web page like that, to know what the context is going to be ahead of time,0596

without doing it manually; and that kind of defeats the purpose.0603

They have come up with a couple of other versions of the DOM (2.0, 3.0, etc.).0609

And now, we have a lot more useful ways of navigating through the DOM with JavaScript.0615

This would be very simple: look at the document, and then child nodes would take all the child nodes of the document.0621

So, that is just going to be HTML at this point; 0 would be the first one.0631

And then, the child nodes of HTML--1 would be the second child node of HTML, which would probably be the body tag,0635

if you have been writing your code well-formed; and then the child nodes of that...0644

And again, it is a plural s here, because it is actually returning an array of all the children.0649

The child nodes of the body--this would be the second one, so maybe that is a header or something like that.0655

And this, if you put this into your JavaScript, is going to give it access to that element, whatever it is.0660

But again, it has the same weakness as this, because it is relative to where it is in the page.0665

And if that changes, dynamically or otherwise, or if it is just difficult to keep track of, it is not going to grab the same node as what you are expecting.0671

And another thing to note here is that, if your HTML is not well-formed, this is going to break, also.0682

All of this DOM navigation with JavaScript is going to break.0690

So, it is very important in your code that you are well-formed.0693

You don't want to have missing parts of your tag, because now, as I am doing this indentation,0697

all of this is suddenly going to be indented differently, because this didn't end.0704

And it is going to get confused about what is inside what, and the nesting is all wrong.0709

And your DOM navigation is going to break.0714

This is a pretty nifty little addition they have: you can access the first or the last child instead of just going by the child nodes.0720

You don't have to know which number it is.0728

So, obviously, 0 would be the first child, but there is not a way, using this syntax, to get the last child; you could just use this.0730

And then, this is where it gets really useful: you can grab it by particular attributes.0738

This skips all of the navigating through the nesting, and just goes directly to grab any element that has an ID of specialElement.0744

And you put in quotes the exact, case-sensitive name of the element.0755

And so, this would be like ID=specialElement, right?0760

You can do the same thing, getElementsByTagName.0764

Every single element with a paragraphElement tag will be returned with this; and it is going to be an array.0768

And then, className also is a very useful one, so you can set your own class, and it will grab all of them.0775

That is a basic introduction to the DOM.0781

If you want to know more about how to use this, you should look into JavaScript.0785

Thanks for watching Educator.com.0789