Getting Good with JavaScript - Andrew Burgess [30]
Summary
We've covered a lot in this chapter. We've looked at Object-Oriented Programming with JavaScript prototypes. We've delved into the concepts of closure and error checking. Then, we discussed the important topics of good coding practices, including testing, organizing, and optimizing your code.
But we've still got a few topics to cover. Next up, we're going to talk about the specifics of working with HTML elements in the browser. It will be slightly intimidating, but you'll by grokking it in no time!
Working with HTML
Up until now, I've tried to talk about JavaScript in a very open way, meaning that pretty much everything you've learned so far will work in any JavaScript environment. However, there's no hiding the fact that you'll probably be writing most of your JavaScript for websites—that is, for running in a browser. So that's what we'll talk about here.
Kids, Meet the DOM
Sounds simple enough, no? The tough part is that "a browser" could mean
Internet Explorer
Firefox
Google Chrome
Safari and Mobile Safari
Opera
ad finitum
Unfortunately, there are at least five major browsers your code has to run in, not to mention the different versions of those browsers.
So what? Well, here's how it all plays out: every web browser implements an interface by which you can interact with the HTML elements that are in the webpage that your JavaScript is running on. But let's back up one more step. When the browser loads a page, it converts the HTML text that you have written into a tree of nodes.
ROCKSTAR TIP
Not sure what a node is? Think of a family tree: each person is a node. In fact, the idea of a family is quite prevalent in the browser: nodes can have siblings, parents and children.
We'll come back to nodes soon; but for now, realize that the browser turns every HTML element into a node. This is half of what the browser brings to the table. The other half is the functionality to access all those things: it's a JavaScript object that allows you to find and manipulate this tree of nodes.
These two parts together are called the Document Object Model or DOM, for short.
So, why is this all so unfortunate? Well, the main issue is that all the different browsers and versions aren't anywhere near harmonious in their implementation of the DOM standard … especially Internet Explorer. This makes it rather difficult to program, as you're often checking for one feature or another, and performing the same action in two or more ways to get one job done. This isn't fun.
The other problem is that the DOM is a pretty clumsy interface to work with; it's not designed nicely at all. Yes, this is definitely an opinion, but it's the opinion of the healthy majority of professional JavaScript developers. However, it's probably not going anywhere anytime soon, so you'll have to get used to it.
Actually, you don't have to get used to it … but it's a good idea if you do. Because if it's awkwardness, stacks of JavaScript libraries have been created to ease the pain. You could jump immediately to something like jQuery or Mootools, but it's better to learn the "real" way first.
So, let's do it!
Nodes
We talked a bit about nodes previously. Every element in your HTML becomes a node in the DOM. Also, every chunk of text in your HTML becomes a node as well (a text node, obviously). Also, the attributes of elements (like the id or class) are nodes. So are the comments in a file.
So, if we had this HTML:
We're learning about the Document Object Model, or DOM.
We would have a DOM tree like this:
Fig. 5-1. DOM Tree of Nodes
The element nodes are bold and the text nodes are italic. As you can see, each element and bunch of sequential text is a node.
Finding