Non-URL DOM Document Object Properties
DOM Document Object – Part 1
Forward: In this part of the series, we look at Non-URL DOM Document Object Properties.
By: Chrysanthus Date Published: 31 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Prerequisite
You should have read the following series before starting this one.
The DOM Document Object
The document object in memory represents the html document, which is:
<!DOCTYPE HTML>
<html>
<head>
<title> . . . </title>
…
</head>
<body>
. . .
</body>
</html>
You can say the html document begins from <html> (<!DOCTYPE HTML>) to </html>.
You can have a frameset consisting of frames and each frame would have an html document. The DOM document object in memory, which represents the document displayed on screen (browser), has properties (values) and methods (functions). In this part of the series, we look at some of the properties.
The title property is used to get or set the text of the title element in the head element. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>elements elements elements</p>
<script type="text/ECMAScript">
alert(document.title);
document.title = "Something Else";
</script>
</body>
</html>
Accessing a property
To access a property as the title property is accessed above, you type the reserved word, document. This is followed by a dot and then the property name; that is:
document.propertyName
Here, the word, document refers to the document object (in memory).
The lastModified Property
This property returns the date and time the document was last updated; this also applies to the very first time the document is created in the server (or uploaded to the server).
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>elements elements elements</p>
<script type="text/ECMAScript">
alert(document.lastModified);
</script>
</body>
</html>
You can use this property to always be indicating, automatically, the date and time the document was last modified as in the following code, which you should read and try:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>elements elements elements</p>
<script type="text/ECMAScript">
document.write(document.lastModified);
</script>
</body>
</html>
We shall discuss the “document.write” expression in a later tutorial.
The readyState property returns a value indicating the loading status of the current document into the web page. The are four possible values, as follows:
Value: Meaning
uninitialized - Has not started loading yet.
loading - Is loading.
interactive - Has loaded enough and the user can interact with it.
complete - Fully loaded.
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<p>elements elements elements</p>
<script type="text/ECMAScript">
alert(document.readyState);
</script>
</body>
</html>
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT