Javascript DOM

Javascript contains a standard way to access and manipulate HTML documents and the elements within them. This standard is called the DOM.

This lesson focuses on:

What is the DOM?
DOM objects

What is the DOM?

DOM stands for Document Object Model. The DOM is a W3C standard by which HTML documents and the elements within them are accessed through Javascript. For example, you can access and change the value in a textbox or change the title of a webpage with the DOM.

DOM objects

There are several DOM objects by which data can be accessed and manipulated.

DOM objects

document
The document object represents an entire webpage and can be used to access the elements on it.
document object properties
- domain
  Returns the domain in which a webpage is located.
- lastModified
  Returns the date and time a webpage was last modified.
document object methods
- write()
  Writes text or content specified with HTML tags to a webpage.
- writeln()
  Same as the write() method, but adds a line break to the end of the data.
Example:
```
<script type="text/javascript"">
document.writeIn("The domain of this document is " 
+ document.domain);
document.writeIn("This document was last modified on " 
                  + document.lastModified);

document.write("<b>Here is some bold text</b>");
document.write("<i>Here is some italic text</i>");

document.writeIn("Some text");
document.write("This text will be printed on the next line");
</script>
```
Output:

Here is some bold text Here is some underlined text Some text
This text will be printed on the next line

window

The window object is at the top of the DOM hierarchy and represents the entire browser window.

window object properties

location
Returns the current URL.

window object methods

alert()
Displays some text in an alert box
prompt()
Displays a prompt box that asks the user for some input.

Example:

<html>
<head>
<title>The window object</title>
</head>
<body>
<form>
<input type="button" value="Click here for a message" 
onclick="window.alert('Hello. This is a message.');" />
<br /><br />
<input type="button" value="Click here to see 
a prompt box" onclick="window.prompt('Enter some data');"
/>
</form>
<script type="text/javascript">
document.write("The URL of this page is " 
                + window.location);
</script>
</body>
</html>

Output:

navigator
The navigator object represents the web browser in use and returns information about it
navigator object properties
- appName
  Returns the name of the web browser.
- cookieEnabled
  Returns a boolean (true/false) value indicating whether cookies are enabled in the web browser.
window object methods
- javaEnabled()
  Returns a boolean (true/false) value indicating whether the web browser has Java enabled.
Example:
```
<script type="text/javascript"">
document.write("Name of web browser: " 
                + navigator.appName);
document.write("<br />Cookies are enabled: " 
                + navigator.cookieEnabled);
document.write("<br />Java is enabled: " 
                + navigator.javaEnabled());
</script>
```
Output: