Introduction to JavaScript Fall 2010 Class 12
Back to Introduction to JavaScript Fall 2010
Contents
Introduction
In this class, you've seen how you can use JavaScript to find elements on the page, manipulate the contents of elements, hide and show elements or even add new elements. We've also made heavy use of jQuery in our JavaScript. jQuery makes is easy to do complex things with JavaScript. Unfortunately, jQuery also hides some of the underlying JavaScript code from you, so you miss out on some of the more poweful features that you can take advantage of with JavaScript.
One of the things that jQuery simplifies is the Document Object Model or the DOM. Completely covering the DOM is beyond the scope of this class, but there are some things you can take advantage of right away while still using jQuery.
Your Page is a Tree
You might not realize it, but every webpage is like a family tree. Every tag on your page has a parent and can also have children. For example, look at a simple page with a div and an unordered list:
<html>
<body>
<div id="container">
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
This unordered list is inside of a div tag. This makes it a child of the div tag. This also makes the div tag the parent of the unordered list. Page elements that are inside of other page elements are children of the elements they are inside of. Likewise, any elements inside of a parent element are the children of that element.
What about the list items inside of the unordered list element? The list items are children of the unordered list element. And the unordered list is the parent of each of the list items. Additionally, each list item is a sibling of the other list items. So, list item 1's siblings are list item 2 and list item 3.
You might find it interesting that each element on the page has a parent, siblings and children, but you also might be wondering what any of this has to do with JavaScript or the Document Object Model. Among other things, the DOM is what allows you to take advantage of this family tree using JavaScript.
Traversing the DOM
Parents and Children
Let's look at that example div and unordered list again:
<div id="container">
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
Let's say that I wanted to find the unordered list with JavaScript and then find its parent. You already know how to find the element using jQuery:
var list = $("#list");
But how would you find the element's parent? jQuery gives you a function called parent that allows you to find an element's parent:
var listParent = $("#list").parent();
The parent function returns an element that you can manipulate using jQuery just like any other element returned by jQuery.
What about the list item's children? jQuery also gives you a function called children that allows you to find an element's children:
var listChildren = $("#list").children();
This time the jQuery function returns a list of children that you can manipulate just like any other list of items returned by jQuery.
A Useful Example
To understand how this functionality can be useful, let's take a look at some sample HTML. In this example, we have a div with some text in it and button that says "close" on it:
<div>
<button class="close-button">Close</button>
This is my div
</div>
Ideally, a user will be able click on the button, which will hide the div. It would also be nice if any button that had the class "close-button" on it would hide its container div. You already know how to find the button and attach a click handler to it, but you will need to traverse the DOM to hide the element's container div. Remember that any element's container is its parent, so you should be able to find and hide the button's parent using the parent function:
var closeButtons = $(".close-button");
closeButtons.click(function() {
var parent = $(this).parent();
parent.hide();
});
The example code above will find any elements with the "close-button" class and attach a handler that closes the parent element when the button is clicked.
Finding Siblings
Let's change the previous example just a little bit. This time, we'll put the close button outside of the element we want to hide:
<body>
<button class="close-button">Close</button>
<div>
This is my div
</div>
</body>
Now, the button is outside of the div. Luckily, we can still use the DOM to find the element.
Notice that the button element and the div element are both inside of the body tag. This means that the body is the parent tag of both the button and the div element. This also means that the button and the div element are siblings. In addition to finding an element's parent and children, you can also find its siblings. The prev function will find an element's nearest sibling that comes before it in the HTML (if it has one) and the next function will find an element's nearest sibling that comes after it in the HTML (if it has one).
In the example above, the div is the next sibling after the button. So, we can use the next function to find the div and hide it:
var closeButtons = $(".close-button");
closeButtons.click(function() {
var div = $(this).next();
div.hide();
});
If the div came before the button we would use the prev function instead.
var closeButtons = $(".close-button");
closeButtons.click(function() {
var div = $(this).prev();
div.hide();
});
Just like finding an element's parent can help to make your code more reusable, finding an element's siblings can make your code simpler and more resuable as well.
More DOM
The Document Object Model does much more than what I've covered above. The bad news is that many of its features are fairly advanced and difficult to cover in a single class. The good news is that we've already covered many of the DOM's simpler features already. For example, being able to find an element and change its HTML or attach events to it are both features of the DOM. Being able to add new elements to the page is also a feature of he DOM that we've covered in this class.
A more complete explanation of the DOM and its history can be found here and here.
