- Refresher on the Different Types of Scripting
- Displaying Random Content on the Client Side
- Understanding the Document Object Model
- Using window Objects
- Working with the document Object
- Accessing Browser History
- Working with the location Object
- More About the DOM Structure
- Working with DOM Nodes
- Creating Positionable Elements (Layers)
- Hiding and Showing Objects
- Modifying Text Within a Page
- Adding Text to a Page
- Changing Images Based on User Interaction
- Thinking Ahead to Developing HTML5 Applications
- Summary
- Q & A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with the document Object
Just like it sounds, the document object represents a web document. Web documents are displayed within browser windows, so it shouldn’t surprise you to learn that the document object is a child of the window object. Because the window object always represents the current window, as you learned in the preceding section, you can use window.document to refer to the current document. You can also simply refer to document, which automatically refers to the current window.
In the following sections, you will look at some of the properties and methods of the document object that will be useful in your scripting.
Getting Information About the Document
Several properties of the document object include information about the current document in general:
document.URL specifies the document’s URL, and you (or your code) cannot change the value of this property.
document.title refers to the title of the current page, defined by the HTML <title> tag. You can change the value of this property.
document.referrer returns the URL of the page the user was viewing before the current page—usually, the page with a link to the current page. As with document.URL, you cannot change the value of document.referrer. Note that document.referrer will be blank if a user has accessed a given URL directly.
document.lastModified is the date the document was last modified. This date is sent from the server along with the page.
document.cookie enables you to read or set a cookie used within the document.
document.images returns a collection of images used in the document.
As an example of a document property, Listing 6.2 shows a short HTML document that displays its last modified date using JavaScript.
LISTING 6.2 Displaying the Last Modified Date
<!DOCTYPE html>
<html lang="en">
<head>
<title>Displaying the Last Modified Date</title>
</head>
<body>
<h1>Displaying the Last Modified Date</h1>
<p>This page was last modified on:
<script type="text/javascript">
document.write(document.lastModified);
</script>
</p>
</body>
</html>
Figure 6.3 shows the output of Listing 6.2.
)
FIGURE 6.3 Viewing the last modified date of a document.
If you use JavaScript to display the value of this document property, you don’t have to remember to update the date each time you modify the page, should you choose to expose this information to the user. (You could also use the script to always print the current date instead of the last modified date, but that would be cheating.)
Writing Text in a Document
The simplest document object methods are also the ones you will use most often. In fact, you’ve used one of them already, even in the most basic examples in this book so far. The document.write method prints text as part of the HTML in a document window. An alternative statement, document. writeln, also prints text, but it includes a newline (\n) character at the end. This is handy when you want your text to be the last thing on the line in your source code.
You can use these methods only within the body of the web page; you can’t use these methods to add to a page that has already loaded without reloading it. You can write new content for a document, however, as the next section explains.
The document.write method can be used within a <script> tag in the body of an HTML document. You can also use it in a function, provided you include a call to the function within the body of the document, as shown in Listing 6.2.
Using Links and Anchors
Another child of the document object is the link object. There can be, and very likely are, multiple link objects in a document. Each link object includes information about a link to another location or to an anchor.
You can access link objects through the links array. Each member of the array is one of the link objects in the current page. A property of the links array, document.links.length, indicates the number of links in the page. You might use the document.links.length property in a script to first determine how many links there are, before performing additional tasks such as dynamically changing the display of a certain number of links, and so on.
Each link object (or member of the links array) has a list of properties defining the URL that is ultimately stored in the object. The href property contains the entire URL, and other properties define other, smaller portions of it. The link object uses the same property names as the location object, defined later in this chapter, so after you commit one set to memory, you will also know the other set.
You can refer to a property by indicating the link number, or position within the array, and the property name. For example, the following statement assigns the entire URL of the first link stored in the array to the variable link1:
var link1 = links[0].href;
The anchor objects are also children of the document object. Each anchor object represents an anchor in the current document—a particular location that can be jumped to directly.
As with links, you can access anchors using an array; this one is called anchors. Each element of this array is an anchor object. The document.anchors.length property gives you the number of elements in the anchors array. An example of using the anchors array to your advantage would be to use JavaScript to loop through all the anchors on a given page, to dynamically generate a table of contents at the top of the page.