JavaScript: Working with the Document Object Model

Name: JavaScript: Working with the Document Object Model
Author: Joseph Barrett

How to utilize the Document Object Model.

Preview the first lesson free — get full access to all 6 lessons.

Course: On-Demand

In this lesson, we're going to look at creating and inserting new elements into the Document Object Model. So let's see what we've got so far. Got your garden variety select box here, and I have a size of five specified so that it comes out as a list box, and we've got some existing option elements. Let's say, for example, maybe this is a travel site. People want to choose a city to visit. We give them some default choices. We also want to allow them to add a new city to the list and they're going to be able to do that by typing the name of the city right down here. Now this doesn't work yet. We're gonna add the code to make it do that. So, I have an event handler here for the submit button and I have select that represents this box that we've already got out here. So I'm going to go through two steps here. The first thing is I'm going to create my new element and the second is I'm going to insert it into the existing element at a particular place. This is just a little helper method I've got created that allows me to take a city with spaces in the name and turn that into a specific value there. But the crux of this is notice that I'm doing document.createElement and I'm creating an option element. When you want to specify attributes for that element, you can simply tag those on with their values. So, the value is gonna be that lowercased string that I create here and the text is gonna be the actual value from the city box that we've done there. So we've created that. Now how do we get it in to where we want it to be? And we've got a couple of different ways that we can go here. The first is prepend. So I'm taking that select element and this just inserts it before the first child element. So, if we come back up here and take a look, there's your collection of child elements for the select list box. So I'm gonna take that. I'm gonna add that in at the beginning. So let's type in Tokyo and I hit my submit button, and there it makes it the first one there. Now, we could also do that in a slightly different way. We also have insertBefore. InsertBefore takes the item that we're going to insert, the element that we're going to insert, as the first parameter and says where we want it to go. So in this case, child nodes of zero, and let's save that and redo the page again. And this should get it right there at the beginning again. We're certainly not restricted to the very first element. I could say to do that and we end up that it's down here. Now notice that's not the fourth or even fifth element, but what you have to understand about these elements is that the options aren't the only nodes in there. White space, for example, comes in as a text node. So you have to watch very carefully when you're crawling the elements in that collection. Now, if you want to insert it at the end, we can do that as well. Let's try that as one other way to do this. There we go. Append just puts it down at the very last. So if we try this one more time, there we go, that's the last one. So in this lesson we learned a few different ways to make sure that our new element shows up in a particular place in the existing element in the DOM. Thanks for watching. In our next lesson, we'll talk more about navigating through the hierarchy of the Document Object Model.

Intermediate Provider : Joseph Barrett 6 Lessons · 29m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

The document object model (DOM) is a basic function of JavaScript. In this course, you’ll learn to create and insert elements into the DOM, how to navigate the DOM, and ways to move items on the web page. You’ll do an exercise on how to change the appearance of your page and learn to change HTML attributes. Finally, you’ll acquire tips for changing the cascading style sheets (CSS), which describe how your page appears visually on your screen.

What You'll Learn

Create and insert new elements into the Document Object Model (DOM) using JavaScript
Navigate the DOM to locate and work with page elements
Move elements around on a web page
Change the appearance of your page and manipulate HTML attributes
Apply tips and tricks for working with cascading style sheets (CSS) in JavaScript

Key Takeaways

The document object model (DOM) is a basic function of JavaScript.
JavaScript can be used to create and insert elements into the DOM as well as navigate it.
Elements can be moved on the web page and their HTML attributes can be changed using JavaScript.
Cascading style sheets (CSS) describe how a page appears visually on the screen, and the course covers tips for changing them.

Frequently Asked Questions

What does this course cover?

It covers creating and inserting elements into the DOM, navigating the DOM, moving items on the web page, changing the page's appearance, changing HTML attributes, and tips for changing cascading style sheets (CSS).

What skills will I gain from this course?

You will build skills in the Document Object Model, DOM Scripting, HTML Document Object Models, HTML Scripting, JavaScript (Programming Language), and Object-Oriented JavaScript.

Does the course include hands-on practice?

Yes, you will do an exercise on how to change the appearance of your page.

What lessons are included?

The lessons are Creating and Inserting New Elements, Navigating the DOM, Moving Elements on the Page, Changing the Page Appearance, Attribute Manipulation, and CSS JavaScript Tricks.