Chapter 9. Using the document and body Objects

In this chapter, we'll take a look at the JavaScript properties, methods , and events of the document object and the <BODY> element. In the early days of JavaScript, before each element became a JavaScript object, the document object gave you access to many aspects of what's really the <BODY> elementfor example, the colors used in the web page. And when you're writing to a web page, you're really writing to the <BODY> element. Because JavaScript programmers needed access to more than just the <BODY> element, the document object grewfor example, this object also has a title property that gives you access to the <TITLE> element in the <HEAD> ,a referrer property that enables you to determine how the user got to the current page, and so on, even a cookie property that lets you set and retrieve cookie data.

That was how the document object developed before Internet Explorer 4.0as a mix of the properties, methods, and events that belonged to various HTML elements. When Internet Explorer 4.0 appeared, the new DOM gave programmers access to every element in the web page directlyincluding the <HEAD> and <BODY> elements. By that time, however, JavaScript programmers had become used to the document object, which no longer corresponded to any one element.

And that brings us to today. The document object is still the huge object that JavaScript programmers have grown to know, but much of what it gives you access to is available in the <BODY> object as wellwhich is why I'm covering both objects in this chapter. For example, the document object's alinkColor property is the same as the <BODY> element's alink property. The document object's linkColor property is the same as the <BODY> element's link property, the document object's fgColor property is the <BODY> element's text property, and so on (although, interestingly, the bgColor property retains the same name in both objects). Although the <BODY> element doesn't have a write method to correspond to the popular document.write , you can perform much the same action with the <BODY> element's innerHTML , innerText , outerHTML , and outerText properties.

Although the document object overlaps with other objects in JavaScript, the document object isn't about to disappear, so there often will be two ways to get a particular task done. So how do you keep all this functionality straight between the document object and the <BODY> element? Easyjust refer to this chapter when you want to do something to find an appropriate property, method, or event. I'll list all that's going on with the document object and the <BODY> element here, and you can choose what you want from that data.

Tip

It's also worth keeping in mind that the document object has been around a lot longer than the <BODY> element has been accessible in JavaScript; so if you're going to be working with older browsers, stick with the document object's properties, methods, and events when possible.

In fact, this chapter starts us off working with real HTML web pages, element by element. For that reason, I'm going to take a quick look first at the other major HTML elements that appear in a page: the <HTML>, <HEAD> , and <TITLE> elements. They need only a short amount of discussion, and I'll start with them.