Enter your Sign on user name and password.

Forgot password?
Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!

Use Chrome browser to play professor video
Brenton Strine

Brenton Strine

The DOM

Slide Duration:

Table of Contents

I. HTML
Your First Web Page

17m 1s

Intro
0:00
World Wide Web
0:23
Introduction to HTML
0:25
Looking at Source Code
0:53
HTML5
1:58
HTML5 Specification
1:59
Creating a Web Page
4:10
What You Will Need to Create a Web Page
4:11
Example: Basic Web Page
4:40
Example: Creating a Web Page
5:46
HTML Elements
6:33
Adding a Title
7:08
Main Body
7:48
First Level Heading
8:23
Adding an Image
8:42
Paragraph
9:09
Adding a List and URLs
11:13
Footer
14:09
CSS: Styling
16:02
Web Basics and Web History

32m 23s

Intro
0:00
The Web
0:56
Overview of the Web
0:58
The Web Page
2:39
Overview of the Web Page
2:40
Web Technologies
4:45
Overview of Web Technologies
4:46
The Web Today
9:22
The Web Today
9:23
What is HTML
11:22
HyperText Markup Language
11:23
The Creation of the Internet
12:40
History of the Internet
12:41
Developments in HTML
14:10
The Birth of HTML
14:11
Early Problems
15:35
Early Browsers
16:24
History of Early Browsers
16:25
NCSA Mosaic
17:55
NCSA Mosaic
17:56
The Browser Wars Begin
19:39
History of the Browser Wars
19:40
Casualties of War
22:27
Results of the Browser Wars
22:28
HTML 4 Stabilization
25:31
History and Overview of HTML4
25:32
Modern Browser Developments
27:27
Modern Browsers
27:29
HTML5
30:57
Overview of HTML5
30:58
Web Development Tools

26m 28s

Intro
0:00
Browsers
0:17
Introduction to Browsers
0:18
Example: Browsers
2:35
Firefox Add-ons
3:14
Firefox Browser
3:15
Example: Firebug Add-ons
3:54
Example: Web Developer Toolbar and ColorZilla
7:51
Domain Names and Hosting
10:23
Overview of Domain Names and Hosting
10:24
Your Own Domain
11:03
Installing a Local Web Server
12:42
Installing a Local Web Server
12:43
Apache Web
13:29
WYSIWYG Editors
15:56
Introduction to WYSIWYG Editors
15:57
Content Management System
18:31
How Content Management System Works
18:32
Example: WordPress
20:00
File Transfer Protocol
22:26
File Transfer Protocol
22:27
HTML Elements and Attributes

21m 50s

Intro
0:00
Proper use of Elements and Attributes
0:14
Elements and Attributes
0:16
Example
1:06
Normal HTML Elements
2:00
Start Tag, Content, and End Tag
2:02
Example: Warning!
2:34
Void HTML Elements
3:23
Self-Closing Tags
3:24
List of Void Elements
4:04
Example: Line Break
5:00
HTML Comments
6:13
Purpose of Comment Tags
6:14
Example: Comment Tags
6:50
Attributes
7:25
Properties of Attributes
7:27
Example: Attributes
7:39
Example: Whitespace
10:22
HTML Character Codes
12:05
Character References
12:07
Example: Registered Trademark Symbol
12:35
Example: Using Character References
13:23
Example: Start Tag and End Tag
15:57
Example: Self-Closing Tag
16:37
Example: Attributes
17:37
Example: Proper use of Elements and Attributes
19:02
Example: Comment
20:09
Example: Whitespace
20:46
Essential Tags Part 1

41m 42s

Intro
0:00
Document Structure Tags
1:13
Document Structure Tags and Example
1:14
Layout Tags
3:24
Layout Tags
3:26
Example: Layout Tags
7:48
Example: Layout Tags
11:28
Example: Layout Tags
13:17
Example: Layout Tags
14:22
Text Level Tags
17:22
Text Level Tags
17:23
Example: Text Level Tags
17:48
Grouping Content Tags
24:23
Grouping Content Tags
24:24
<p> Tag
24:45
<hr> Tag
25:31
<figure>, <figcaption>, and <blockquote> Tag
26:14
<div> Tag
26:58
Example: Grouping Content Tags
27:28
Embedded Content Tags
33:12
Embedded Content Tags
33:13
Example: Embedded Content Tags
35:39
Essential Tags Part 2

24m 20s

Intro
0:00
Simple Tables
0:17
Simple Tables
0:19
Example: Simple Tables
2:31
Semantic Tables
5:11
Semantic Tables
5:14
Example: Semantic Tables
6:24
Simple Lists
8:14
Simple Lists
8:18
Unordered List
8:36
Ordered List
8:42
Example: Simple Lists
9:37
Definition Lists
14:08
Definition Lists
14:09
Example: Definition Lists
15:21
Forms
17:11
Forms
17:12
Example: Forms
17:52
Markup Language

29m 38s

Intro
0:00
HTML 1 Through 3.2
0:13
Period of Rapid Growth of HTML
0:14
Tag Soup
2:03
Definition of Tag Soup
2:04
Example: Tag Soup
3:00
Example: Tag Soup and Valid Doctype
4:45
HTML 4.01
5:26
Overview of HTML 4.01
5:27
Three Flavors of HTML 4.01: Strict, Transitional, and Frameset
6:05
XHTML 1
7:19
Overview of XHTML 1
7:20
Example: XHTML 1
9:20
XHTML1 Syntax
11:48
Lower Case Rule
11:49
Closed Elements Rule
12:25
Encased in Quotes Rule
14:18
Boolean Attributes May Not Be Minimized
14:35
Correct Nesting is Enforced
15:29
The Problem with XHTML
16:15
Problem with XHTML
16:16
XHTML 2
19:22
Overview of XHTML 2
19:23
HTML 5
20:43
Overview of HTML 5
20:44
Validating
22:44
Validators
22:45
Example: W3C Markup Validation Service
25:26
Page Structure and Meta-data Elements

32m 50s

Intro
0:00
The Doctype
0:12
Doctype
0:13
Example: Doctype
1:25
The Root Element
1:57
Root Element
1:58
Example: Root Element
2:45
The Head Element
3:38
Head Element and Body Element
3:39
Example: Head Element and Body Element
5:06
The Head Element
5:42
Head Element vs. Header Element
5:47
The Title Element
6:51
Title Element
6:52
Example: Title Element
7:54
The Base Element
9:00
Base Element
9:03
Example: Base Element
9:42
The Link Element
14:07
Link Element: rel, type, and href
14:08
Example: Link Element
15:13
The Meta Element
17:54
Meta Element: charset, name, and http-equiv
17:55
Example: Meta Element
21:00
The Style Element
23:35
Style Element
23:37
Example: Style Element
24:40
Text-Level Semantics

30m 13s

Intro
0:00
Text Level Semantics
0:06
Paragraph Level
0:07
The <a> Element
2:23
Definition of the <a> Element
2:25
The <em> Element
3:25
Definition of the <em> Element
3:26
The <strong> Element
6:50
The <strong> Element
6:51
The <small> Element
8:35
The <small> Element
8:36
Example of <small> Element
10:19
The <cite> Element
10:55
The <cite> Element
10:56
Example of <cite> Element
12:32
The <q> Element
12:45
The <q> Element
12:46
Example of <q> Element
13:34
The <abbr> Element
15:35
The <abbr> Element
15:36
Example of <abbr> Element
16:41
The <dfn> Element
17:03
The <dfn> Element
17:04
Example of <dfn> Element
18:01
The <time> Element
19:11
The <time> Element and Example
19:12
The <code> Element
21:18
The <code> Element
21:19
Example of <code> Element
23:00
The <sub> and <sup> Elements
23:31
The <sub> and <sup> Elements
23:32
Example of <sub> and <sup> Elements
23:50
The <i> Element
24:51
The <i> Element and Example
24:52
The <b> Element
27:16
The <b> Element
27:17
Example of <b> Element
29:07
Heading and Sectioning

23m 39s

Intro
0:00
Heading Elements
0:06
Heading Tags
0:07
Heading Rules
1:13
Heading Rules and Example
1:35
Sectioning Roots
5:39
Sectioning Roots
5:41
Sectioning Contents
6:25
Sectioning Content Elements
6:27
Section Wrapping
7:40
Section Wrapping
7:41
Example: Section Wrapping
10:10
Real World Example 1
15:36
Forms

47m 51s

Intro
0:00
Form Terminology
0:23
Form
0:24
Control
0:43
Control Name and Control Label
1:09
Input Type and State
1:52
Form Controls
2:20
Button: Submit and Reset
2:32
Radio
3:37
Checkbox
4:00
Select Menu
4:05
Textarea
4:28
Various Input Types
4:38
Example: Basic Controls of Form Element
7:05
Example: Buttons
18:20
Example: Additional Controls
20:56
Example: Special Input Types
27:55
Example: Date and Time Control
33:40
Example: Create Your Own Control
37:32
Example: Placeholder Text
39:10
Example: Datalist
41:43
Example: Sizing and Input Containment
42:16
Example: Select Modification
42:51
Example: Required Attribute
44:41
Links

36m 41s

Intro
0:00
URIs and URLs
0:23
Definitions of URL and URI
0:36
Differences Between URL and URI
0:42
Example: URI and URL
1:14
Typical URI Construction
2:33
Domain and Subdomain
2:34
Protocol
4:18
IP Address
5:05
Typical URI Construction
5:32
Second Level Domain
5:33
Port
6:07
Foldernames
6:46
Typical URI Construction
8:06
Filename and File Extension
8:08
Typical URI Construction
10:38
Name/ Value Pairs
10:40
Internal Anchors
11:45
Typical URI Construction
12:30
Example: URI Construction
12:31
Relative and Absolute URIs
14:20
Relative and Absolute URIs
14:22
Example: Relative and Absolute URIs
18:32
Link States
24:15
Link States
24:16
Example: Link States
25:18
Block Level Links
27:02
Example: Block Level Links
27:03
Bookmark Links
29:18
Bookmark Links
29:20
Example: Bookmark Links
30:15
Attributes
32:06
href and target
32:20
rel, media, hreflang, and type
33:18
Embedded Content

46m 5s

Intro
0:00
Embedding Image
0:22
Embedding an Image
0:25
Image File Formats
3:38
Image Format: Jpg
3:42
Image Format: Png
4:13
Image Format: Gif
4:40
Compression
6:05
Image Format: Precise Lines and Fewer Colors
8:38
Animated Gif
10:49
Alpha Transparency Png
11:09
Embedding Audio
12:52
Old Way of Embedding Audio
13:00
New Way of Embedding Audio
14:54
Example: Adding Buttons
20:04
Message for Users
26:36
Audio Attributes
27:46
Control
28:29
Autoplay
28:44
Loop
29:36
Preload
30:40
Embedding Video
32:00
Embedding Video
32:11
Controls
34:22
Poster Attributes
36:01
Video Formats
37:36
Solving Formatting Problem
39:26
The Canvas Element

19m 25s

Intro
0:00
Creating the Element
0:38
What is the Canvas Element?
0:39
HTML and Canvas Element
1:48
Example: Canvas Element
3:23
Creating the Canvas in JavaScript
5:13
getContext() Method
5:17
Checking Browser Support with the getContext() Method
6:00
Example: Creating the Canvas in JavaScript
7:31
Drawing in the Canvas
10:13
Methods for Drawing in the Canvas
10:14
2d Context
10:58
Example: Creating Drawing in the Canvas
11:39
Example: Adding an Image and Texts
15:30
Example: Advance Canvas Element
17:31
Content Models

29m 8s

Intro
0:00
The HTML 4.01 Content Model
0:16
Block Elements and Inline Elements
0:18
Example: Block Elements and Inline Elements
1:18
W3C Markup Validation Service
3:28
The HTML5 Content Model
6:21
Overview of HTML5 New Content Categories
6:22
Flow Content
8:02
Specification for Content Models
8:05
Flow Content
9:41
Example: Flow Content Elements
10:40
List of Flow Content
11:35
BlockQuote Element
11:50
Sectioning Content
13:19
Introduction to Sectioning Content
13:20
Heading Content
14:06
Heading Content and hgroup Element
14:07
Phrasing Content
16:56
Attributes of Phrasing Content
16:57
Anchor Element in Phrasing Content
17:28
Embedded Content
19:33
Attributes of Embedded Content
19:34
No Content
19:53
Transparent Content
20:38
Source Elements and Param Elements
21:15
Interactive Content
24:16
Interactive Content Elements
24:17
Button Element
25:57
The DOM

13m 10s

Intro
0:00
The DOM
0:26
Document Object Model
0:27
The DOM Tree
0:55
DOM Trees
0:56
Example: DOM Tree
1:31
Vocabulary: Tree, Node,Branch, Parent, Child
2:15
Exploring the DOM
3:13
Example: Built-in Browser Inspection and Firebug
3:15
Example: Manually Exploring the DOM
6:01
JavaScript
7:28
DOM Navigation Techniques
7:55
DOM Navigation Techniques
7:56
Favicons

13m 14s

Intro
0:00
Favorite Icons
0:08
Function of Favorite Icons
0:09
Bowser Support
1:10
Browser Support
1:13
Location in Browsers
1:46
Implementation Methods
2:04
Implementation Methods for Favorite Icons
2:05
Favicon and Apple Mobile Devices
4:51
Creating the Icon
6:13
How to Create the Icon
6:14
Favicon Resources
9:10
Websites for Icon Creation and Conversion
9:11
Programs for Icon Creation and Conversion
11:50
Embedding Flash and Other Objects

15m 7s

Intro
0:00
Flash and other Plug-ins
0:41
Main Problems with Flash
0:44
Benefits of Flash
2:02
Embedding Flash: the Old Way
2:57
The Old Way to Embed Flash
2:58
Embedding Flash: the Satay Method
6:42
Satay Method
6:43
Embedding Flash: HTML5
9:28
How to Embed Flash in HTML5
9:29
Embedding Flash Directly in <video>
11:39
Embedding Flash Directly in Video Element
11:40
Review of Embedding
13:24
Image Elements
13:39
Video, Audio, and Canvas Elements
13:44
Embed Elements
13:53
Object Elements
14:04
Offline Cache

19m 53s

Intro
0:00
Purpose
0:47
Purpose of Offline Cache
0:48
The Appache
2:06
Attributes of Appcache
2:07
The Manifest File
3:22
Manifest File
3:23
Example of Manifest
3:32
Section Headers: Cache, Fallback, and Network
4:21
Server-Side Considerations
5:17
text/cache-manifest MIME-type
5:18
Other Server-Side Considerations
5:41
ExpiresActive On and ExpiresDefault 'access'
6:07
Example: Offline Cache 1
7:44
Example: Overwriting Files
11:09
Example: Wild Cards for Network
14:58
Example: Offline Cache 2
16:06
Web Development Principles

26m 47s

Intro
0:00
Interoperability
0:36
Interoperability of Web Development
0:37
Interoperable Websites Should Work
3:05
Qualities of Interoperable Websites
3:06
Backward Compatibility
5:52
Compatibility With Older Technology
5:53
Example: Meta Tag
9:07
Forward Compatibility
9:33
Advancement in Technology
9:34
Accessibility
10:11
Accessibility of Content
10:12
Semantic Code
11:43
Example: Where Will This Link Take You?
13:56
Graceful Degradation
14:59
Graceful Degradation or Fault Tolerance
15:00
Types of Degradation
16:35
Progressive Enhancement
18:36
Progressive Enhancement
18:37
Future Detection and Browser Sniffing
21:05
Future Detection Versus Browser Sniffing
21:06
Example: Email Input Type
23:39
Tim Berners-Lee's Quote
26:20
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of HTML
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Lecture Comments (2)

0 answers

Post by David L on March 15, 2012

I like how your lectures have HISTORY and version changes included and is constantly a part of the course. Since web language and tech is always changing, it's really helpful to know what changes have been made and why. Thanks!

0 answers

Post by abbas esmailzadeh on February 12, 2012

why there is no quick notes for learning html is not available like in math section.

The DOM

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • The DOM 0:26
    • Document Object Model
  • The DOM Tree 0:55
    • DOM Trees
    • Example: DOM Tree
    • Vocabulary: Tree, Node,Branch, Parent, Child
  • Exploring the DOM 3:13
    • Example: Built-in Browser Inspection and Firebug
    • Example: Manually Exploring the DOM
    • JavaScript
  • DOM Navigation Techniques 7:55
    • DOM Navigation Techniques

Transcription: 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

Educator®

Please sign in for full access to this lesson.

Sign-InORCreate Account

Enter your Sign-on user name and password.

Forgot password?

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.

Use this form or mail us to .

For support articles click here.