Difference between revisions of "JavaScript Document Object"

From Techotopia
Jump to: navigation, search
m (Text replacement - "<table border="0" cellspacing="0"> " to "<table border="0" cellspacing="0" width="100%">")
 
(53 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
<table border="0" cellspacing="0" width="100%"><tr>
 +
<td width="20%">[[JavaScript Window Object|Previous]]<td align="center">[[JavaScript Essentials|Table of Contents]]<td width="20%" align="right">[[JavaScript Location Object|Next]]</td>
 +
<tr>
 +
<td width="20%">JavaScript Window Object<td align="center"><td width="20%" align="right">JavaScript Location Object</td>
 +
</table>
 +
<hr>
 +
 +
 +
<htmlet>jscript</htmlet>
 +
 +
 
In the [[JavaScript Window Object]] chapter we looked at how perform such tasks as opening and closing browser windows and controlling the appearance and position of those windows. Whilst the window object gives us the ability to control various aspects of the browser window it does not provide us any control over the content of the window. In order to manipulate the content that appears in the browser we need to turn to the JavaScript ''Document'' object.
 
In the [[JavaScript Window Object]] chapter we looked at how perform such tasks as opening and closing browser windows and controlling the appearance and position of those windows. Whilst the window object gives us the ability to control various aspects of the browser window it does not provide us any control over the content of the window. In order to manipulate the content that appears in the browser we need to turn to the JavaScript ''Document'' object.
 +
 +
== What is the JavaScript Document Object? ==
 +
 +
The JavaScript Document object essentially contains the HTML elements that are contained the ''<head>'' and ''<body>'' sections of a web page. It provides the hooks (via a set of object methods and properties) that enable basic changes to be made to the content of a browser window from within a JavaScript script.
 +
 +
The Document object gets the initial value of its ''title'' property from the HTML ''<title>'' tag and a number of color and event values from the ''<body>'' element:
 +
 +
<pre>
 +
 +
<body
 +
  [alink="activated link color"]
 +
  [background="background image file"]
 +
  [bgcolor="background color"]
 +
  [link="unvisited link color"]
 +
  [onload="page load functionName"]
 +
  [onunload="page unload functionName"]
 +
  [text="foreground color"]
 +
  [vlink="visited link color"]>
 +
</body>
 +
 +
</pre>
 +
 +
It is important to note that these are only optional initial values. Regardless of whether these are declared in the ''<body>'' element they can still be set, or modified from JavaScript via the Document object.
 +
 +
== JavaScript Document Object Methods and Properties ==
 +
 +
The JavaScript Document contains a wide range of methods and properties that are of considerable use to developers. The following table lists the key methods and properties provided by the Document object:
 +
 +
=== Document Object Methods ===
 +
<htmlet>adsdaqbox_flow</htmlet>
 +
<table border="1" cellspacing="1">
 +
<th>Method<th>Description</th>
 +
<tr>
 +
<td>open()<td>Opens the output stream to the document for writing</td>
 +
<tr>
 +
<td>close()<td>Closes the output stream to the document to prevent further writing</td>
 +
<tr>
 +
<td>write()<td>Appends text to the document.</td>
 +
<tr>
 +
<td>writeln()<td>Appends text to the document followed by a ''newline'' character</td>
 +
</table>
 +
 +
=== Document Object Properties ===
 +
 +
<table border="1" cellspacing="0">
 +
<th>Property<th>Description</th>
 +
<tr>
 +
<td>alinkcolor<td>The color to be used when displaying activated links in the document</td>
 +
<tr>
 +
<td>anchors<td>An array of anchor objects present in the document</td>
 +
<tr>
 +
<td>applets<td>An array of Java Applet objects embedded into the document</td>
 +
<tr>
 +
<td>bgColor<td>The background color of the document</td>
 +
<tr>
 +
<td>fgColor<td>The foreground color (i.e. the color of the text in the document)</td>
 +
<tr>
 +
<td>cookie<td>The cookie, if any, associated with the document. See [[Understanding JavaScript Cookies]]</td>
 +
<tr>
 +
<td>domain<td>The current domain of the document</td>
 +
<tr>
 +
<td>embeds<td>An array of objects embedded into the document</td>
 +
<tr>
 +
<td>forms<td>An array of the Forms objects contained in the document. See [[JavaScript Forms and HTML]]</td>
 +
<tr>
 +
<td>images<td>An Array of ''Image'' objects contained the document</td>
 +
<tr>
 +
<td>lastModified<td>The date that the document was last modified</td>
 +
<tr>
 +
<td>linkColor<td>The color to be used when displaying links in the document</td>
 +
<tr>
 +
<td>links<td>An array of links contained in the document</td>
 +
<tr>
 +
<td>referrer<td>The URL of the document from which  the current document was linked (i.e. how the visitor arrived at this page)</td>
 +
<tr>
 +
<td>title<td>The title of the document (corresponds to the HTML ''<title>'' tag)</td>
 +
<tr>
 +
<td>URL<td>The URL of the current document</td>
 +
<tr>
 +
<td>vlinkColor<td>The color to be used when displaying links in the document which have been visited by the current user</td>
 +
</table>
 +
 +
== Using the JavaScript Document Object ==
 +
 +
Now that we have seen the methods and properties that are available with the Document object we can begin explore how to use them:
 +
 +
=== Writing text to a document ===
 +
 +
The document object ''open()'' and ''write()'' methods can be used to dynamically write text to a web page. The following example contains both some text contained in the HTML file, together with some JavaScript to write additional text into the page:
 +
 +
<pre>
 +
 +
<html>
 +
<head>
 +
<title>JavaScript Document Object Example</title>
 +
</head>
 +
<body>
 +
<p>
 +
This is a line of text specified in the HTML file
 +
</p>
 +
<script language="javascript" type="text/javascript">
 +
document.open()
 +
document.write("This is a line of text written to the document using JavaScript");
 +
</script>
 +
 +
</body>
 +
</html>
 +
 +
</pre>
 +
 +
The above example will display the following in the browser window:
 +
 +
<pre>
 +
This is a line of text specified in the HTML file
 +
This is a line of text written to the document using JavaScript
 +
</pre>
 +
 +
=== Writing Text to a document in a different Window ===
 +
 +
The writing of text to a document is not restricted to writing to the document in the current window. It is also possible to write content to a different window simply by referencing the window in the JavaScript command (for details on opening new windows see the [[JavaScript Window Object]] chapter). The following example opens a new window and then writes text into that new window:
 +
 +
<pre>
 +
 +
<html>
 +
<head>
 +
<title>JavaScript Document Object Example</title>
 +
<script language="javascript" type="text/javascript">
 +
 +
function writeContent(content, windowObj)
 +
{
 +
      windowObj.document.write(content);
 +
}
 +
</script>
 +
</head>
 +
 +
<body>
 +
 +
<script language="javascript" type="text/javascript">
 +
 +
newWindowObj = window.open ("", "MyWindow");
 +
 +
</script>
 +
 +
<form action="">
 +
      <input type=button value="Write to New Window" onclick="writeContent('This is new content in the new window', newWindowObj)"/>
 +
</form>
 +
</body>
 +
</html>
 +
 +
</pre>
 +
 +
=== Changing the Document Title ===
 +
 +
Even when the title of a document has been specified using the HTML ''<title>'' tag it is possible to dynamically change the current setting using the ''title'' property of the document object. The following example initially sets the document title to ''JavaScript Document Object Example'' and provides a button which, when pressed, changes the title to a new value:
 +
 +
<pre>
 +
 +
<html>
 +
<head>
 +
<title>JavaScript Document Object Example</title>
 +
</head>
 +
<body>
 +
<form action="">
 +
      <input type=button value="Press to change title" onclick="document.title='hello'"/>
 +
</form>
 +
</body>
 +
</html>
 +
 +
</pre>
 +
 +
=== Changing the Document Colors ===
 +
 +
A similar approach can be used to change the colors using in the document. As outlined in the document object properties table there a number of color setting ranging from foreground and background colors through to colors used for links (such as visited and unvisted link colors). The following example changes the foreground and background colors when the "Change colors" button is pressed:
 +
 +
<pre>
 +
 +
<html>
 +
<head>
 +
<title>JavaScript Document Object Example</title>
 +
<script language="javascript" type="text/javascript">
 +
 +
function changeColors()
 +
{
 +
        document.fgColor="red";
 +
        document.bgColor="blue";
 +
}
 +
</script>
 +
</head>
 +
 +
<body>
 +
<p>
 +
Sample text to show color change
 +
</p>
 +
<form action="">
 +
      <input type=button value="Change colors" onclick="changeColors()"/>
 +
</form>
 +
</body>
 +
</html>
 +
 +
</pre>
 +
 +
=== Getting a List of Objects in a Document ===
 +
 +
A typical web page can contain a number of other object types, such as links, anchors, images and Java applets. A number of the properties listed in the table above consist of arrays containing a list of objects of a particular type (for details on arrays see [[JavaScript Arrays]]). These array based properties can be accessed to obtain a list of objects of the corresponding type present in the document. For example, the ''links'' property of the document object can be used to obtain a list of Link objects (in other words, links to other web pages) in the current document. To demonstrate this, the following example consists of a simple HTML page containing two links to other sites (Amazon.com and Yahoo). The JavaScript code accesses the ''links'' property of the document object, iterates through the array elements and writes out the value of each to the document using the document object ''write()'' method:
 +
 +
<pre>
 +
 +
<html>
 +
<head>
 +
<title>JavaScript Document Object Example</title>
 +
</head>
 +
 +
<body>
 +
 +
<a href="http://www.amazon.com">Buy more books</a>
 +
<br>
 +
<a href="http://www.yahoo.com">Stop making Google rich</a>
 +
<br>
 +
 +
<script language="javascript" type="text/javascript">
 +
for (i in document.links)
 +
{
 +
        document.write( document.links[i] + "<br>" );
 +
}
 +
</script>
 +
 +
</form>
 +
</body>
 +
</html>
 +
 +
</pre>
 +
 +
As one might expect the JavaScript in the above HTML file outputs the following for the two links found in the document:
 +
 +
<pre>
 +
 +
http://www.amazon.com/
 +
http://www.yahoo.com/
 +
 +
</pre>
 +
 +
Although this example focuses solely on the ''links'' property, the same approach can be taken to obtain the contents of any of the object type array properties of the document object (namely embeds, applets, forms, and images).
 +
 +
 +
<htmlet>jscript</htmlet>
 +
 +
 +
 +
<htmlet>ezoicbottom</htmlet>
 +
<hr>
 +
<table border="0" cellspacing="0" width="100%"><tr>
 +
<td width="20%">[[JavaScript Window Object|Previous]]<td align="center">[[JavaScript Essentials|Table of Contents]]<td width="20%" align="right">[[JavaScript Location Object|Next]]</td>
 +
<tr>
 +
<td width="20%">JavaScript Window Object<td align="center"><td width="20%" align="right">JavaScript Location Object</td>
 +
</table>
 +
<hr>

Latest revision as of 20:16, 27 October 2016

PreviousTable of ContentsNext
JavaScript Window ObjectJavaScript Location Object


Purchase and download the full PDF version of this JavaScript eBook for only $8.99


In the JavaScript Window Object chapter we looked at how perform such tasks as opening and closing browser windows and controlling the appearance and position of those windows. Whilst the window object gives us the ability to control various aspects of the browser window it does not provide us any control over the content of the window. In order to manipulate the content that appears in the browser we need to turn to the JavaScript Document object.


Contents

What is the JavaScript Document Object?

The JavaScript Document object essentially contains the HTML elements that are contained the <head> and <body> sections of a web page. It provides the hooks (via a set of object methods and properties) that enable basic changes to be made to the content of a browser window from within a JavaScript script.

The Document object gets the initial value of its title property from the HTML <title> tag and a number of color and event values from the <body> element: 


<body
   [alink="activated link color"]
   [background="background image file"]
   [bgcolor="background color"]
   [link="unvisited link color"]
   [onload="page load functionName"]
   [onunload="page unload functionName"]
   [text="foreground color"]
   [vlink="visited link color"]>
</body>

It is important to note that these are only optional initial values. Regardless of whether these are declared in the <body> element they can still be set, or modified from JavaScript via the Document object.

JavaScript Document Object Methods and Properties

The JavaScript Document contains a wide range of methods and properties that are of considerable use to developers. The following table lists the key methods and properties provided by the Document object:


Document Object Methods

MethodDescription
open()Opens the output stream to the document for writing
close()Closes the output stream to the document to prevent further writing
write()Appends text to the document.
writeln()Appends text to the document followed by a newline character

Document Object Properties

PropertyDescription
alinkcolorThe color to be used when displaying activated links in the document
anchorsAn array of anchor objects present in the document
appletsAn array of Java Applet objects embedded into the document
bgColorThe background color of the document
fgColorThe foreground color (i.e. the color of the text in the document)
cookieThe cookie, if any, associated with the document. See Understanding JavaScript Cookies
domainThe current domain of the document
embedsAn array of objects embedded into the document
formsAn array of the Forms objects contained in the document. See JavaScript Forms and HTML
imagesAn Array of Image objects contained the document
lastModifiedThe date that the document was last modified
linkColorThe color to be used when displaying links in the document
linksAn array of links contained in the document
referrerThe URL of the document from which the current document was linked (i.e. how the visitor arrived at this page)
titleThe title of the document (corresponds to the HTML <title> tag)
URLThe URL of the current document
vlinkColorThe color to be used when displaying links in the document which have been visited by the current user

Using the JavaScript Document Object

Now that we have seen the methods and properties that are available with the Document object we can begin explore how to use them:

Writing text to a document

The document object open() and write() methods can be used to dynamically write text to a web page. The following example contains both some text contained in the HTML file, together with some JavaScript to write additional text into the page: 


<html>
<head>
<title>JavaScript Document Object Example</title>
</head>
<body>
<p>
This is a line of text specified in the HTML file
</p>
<script language="javascript" type="text/javascript">
document.open()
document.write("This is a line of text written to the document using JavaScript");
</script>

</body>
</html>

The above example will display the following in the browser window: 

This is a line of text specified in the HTML file
This is a line of text written to the document using JavaScript

Writing Text to a document in a different Window

The writing of text to a document is not restricted to writing to the document in the current window. It is also possible to write content to a different window simply by referencing the window in the JavaScript command (for details on opening new windows see the JavaScript Window Object chapter). The following example opens a new window and then writes text into that new window: 


<html>
<head>
<title>JavaScript Document Object Example</title>
<script language="javascript" type="text/javascript">

function writeContent(content, windowObj)
{
       windowObj.document.write(content);
}
</script>
</head>

<body>

<script language="javascript" type="text/javascript">

newWindowObj = window.open ("", "MyWindow");

</script>

<form action="">
      <input type=button value="Write to New Window" onclick="writeContent('This is new content in the new window', newWindowObj)"/>
</form>
</body>
</html>

Changing the Document Title

Even when the title of a document has been specified using the HTML <title> tag it is possible to dynamically change the current setting using the title property of the document object. The following example initially sets the document title to JavaScript Document Object Example and provides a button which, when pressed, changes the title to a new value: 


<html>
<head>
<title>JavaScript Document Object Example</title>
</head>
<body>
<form action="">
      <input type=button value="Press to change title" onclick="document.title='hello'"/>
</form>
</body>
</html>

Changing the Document Colors

A similar approach can be used to change the colors using in the document. As outlined in the document object properties table there a number of color setting ranging from foreground and background colors through to colors used for links (such as visited and unvisted link colors). The following example changes the foreground and background colors when the "Change colors" button is pressed: 


<html>
<head>
<title>JavaScript Document Object Example</title>
<script language="javascript" type="text/javascript">

function changeColors()
{
        document.fgColor="red";
        document.bgColor="blue";
}
</script>
</head>

<body>
<p>
Sample text to show color change
</p>
<form action="">
      <input type=button value="Change colors" onclick="changeColors()"/>
</form>
</body>
</html>

Getting a List of Objects in a Document

A typical web page can contain a number of other object types, such as links, anchors, images and Java applets. A number of the properties listed in the table above consist of arrays containing a list of objects of a particular type (for details on arrays see JavaScript Arrays). These array based properties can be accessed to obtain a list of objects of the corresponding type present in the document. For example, the links property of the document object can be used to obtain a list of Link objects (in other words, links to other web pages) in the current document. To demonstrate this, the following example consists of a simple HTML page containing two links to other sites (Amazon.com and Yahoo). The JavaScript code accesses the links property of the document object, iterates through the array elements and writes out the value of each to the document using the document object write() method: 


<html>
<head>
<title>JavaScript Document Object Example</title>
</head>

<body>

<a href="http://www.amazon.com">Buy more books</a>
<br>
<a href="http://www.yahoo.com">Stop making Google rich</a>
<br>

<script language="javascript" type="text/javascript">
for (i in document.links)
{
        document.write( document.links[i] + "<br>" );
}
</script>

</form>
</body>
</html>

As one might expect the JavaScript in the above HTML file outputs the following for the two links found in the document: 


http://www.amazon.com/
http://www.yahoo.com/

Although this example focuses solely on the links property, the same approach can be taken to obtain the contents of any of the object type array properties of the document object (namely embeds, applets, forms, and images).


Purchase and download the full PDF version of this JavaScript eBook for only $8.99


PreviousTable of ContentsNext
JavaScript Window ObjectJavaScript Location Object
Retrieved from "https://www.techotopia.com/index.php?title=JavaScript_Document_Object&oldid=30998"