As you know already, the Document Object Model applies to both XML and HTML documents. What you've learned above about traversing the tree and then adding, removing, or modifying nodes applies to any XML document. There are, however, some HTML-only objects and properties.
document.body is one such HTML-only object. It's so common to have a<body> tag in HTML documents and it's accessed so often, that it is justifiable in having an object that is much friendlier than the equivalent
document.getElementsByTagName('body')[0].document.body is one example of an object that was actually inherited from the pre-historic DOM Level 0 and moved to the HTML extension of the DOM specification. There are other objects like document.body. For some of them there is no Core DOM equivalent; for others there is an equivalent, but the DOM0 original was ported anyway for simplicity and legacy purposes. Let's see some of those objects.
Unlike the DOM, which gives you access to any element (and even comments and white-space), initially JavaScript had only a limited access to the elements of an HTML document. This was done mainly through a number of collections:
document.images - this is a collection of all of the images on the page.
This is the same as the Core DOM equivalent document.getElementsByTagName('img')
document.applets - this is the same as document.getElementsByTagName
('applets')document.links document.anchors document.forms
document.links contains a list of all <a href="..."></a> tags on the page, meaning the A tags that have an href attribute. document.anchors contains all links with a name attribute (<a name="..."></a>).
One of the most widely used collections is document.forms, which contains a list of <form> tags. This will give you access to the first form on the page:
document.forms[0]
This would be the same as:
document.getElementsByTagName('forms')[0]The forms collection contains input fields and buttons, accessible through the elements property. Here's how to access the first input of the first form on the page:
document.forms[0].elements[0]
Once you have access to an element, you can access the attributes of the tag as object properties. Imagine the first field of the first form is this:
<input name="search" id="search" type="text" size="50" maxlength="255" value="Enter email..." />
You can change the text in the field (the value of the value attribute) by using something like:
document.forms[0].elements[0].value = 'me@example.org' "me@example.org"
If you want to disable the field dynamically:
document.forms[0].elements[0].disabled = true;
When forms or form elements have a name attribute, you can access them by name too:
document.forms[0].elements['search']; // array notation document.forms[0].elements.search; // object property
The method document.write() allows you to insert HTML into the page while the page is being loaded. You can have something like this:
<p>It is now <script>document.write("<em>" + new Date()+ "</em>");</script></p>This will be the same as if you had the date directly in source of the HTML document:
<p>It is now <em>Sat Feb 23 2008 17:48:04 GMT-0800 (Pacific Standard Time)</em></p>
There's also the document.writeln() which is the same as document.write(), but it adds a new line "\n" at the end, so these would be equivalent:
document.write('boo!\n');
document.writeln('boo!');Note that you can only use document.write() while the page is being loaded, if you try it after page load, it will replace the content of the whole page.
It's rare that you would need document.write(), and if you think you do, try an alternative approach. The ways to modify the content of the page provided by DOM Level 1 are preferred and are much more flexible.
The four additional properties of document you'll see in this section are also ported from DOM Level 0 to the HTML extension of DOM Level 1. Unlike the previous ones, for these properties there are no Core DOM equivalents.
document.cookie is a property that contains a string. This string is the content of the cookies exchanged between the server and the client. When the server sends a page to the browser, it may include the Set-Cookie HTTP header. When the client sends a request to the server, it sends the cookie information back with the Cookie header. Using document.cookie you can alter the cookies the browser sends to the server. Visiting cnn.com for example and typing document.cookie in the console gives you something like:
document.cookie "CNNid=Ga50a0c6f-14404-1198821758-6; SelectedEdition=www; s_sess=%20s_dslv%...
document.title allows you to change the title of the page displayed in the browser window. For example on cnn.com, you can do:
document.title = 'My title' "My title"
The result will be something like:
Note that this doesn't change the value of the <title> tag, but only the display in the browser window, so it is not equivalent to document.getElementsByTagName('title')[0].
document.referrer tells you the URL of the previously-visited page. This is the same value the browser sends in the Referer HTTP header when requesting the page. (Note that Referer is misspelled in the HTTP headers, but is correct in JavaScript's document.referrer). If you've visited the CNN page by searching Yahoo! first, you can see something like:
document.referrer "http://search.yahoo.com/search?p=cnn&ei=UTF-8&fr=moz2"
document.domain gives you access to the domain name of the currently-loaded page. This is useful when you need to perform so-called domain relaxation. Imagine your page is www.yahoo.com and you have a frame or iframe hosted on music.yahoo.com. These are two separate domains so the browser's security restrictions won't allow the page to communicate with the iframe. To resolve this you can set document.domain on both pages to yahoo.com and they'll be able to "talk" to each other.
Note that you can only set the domain to a less-specific one; for example, you can change www.yahoo.com to yahoo.com, but you cannot change yahoo.com to www.yahoo.com or any other non-yahoo domain.
document.domain "www.yahoo.com" document.domain = 'yahoo.com' "yahoo.com" document.domain = 'www.yahoo.com' Illegal document.domain value" code: "1009 document.domain = 'www.example.org' Illegal document.domain value" code: "1009
Previously in this chapter, you saw the window.location object. Well, the same functionality is also available as document.location:
window.location === document.location true
