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 tutorial 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.
-
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>
<input type="button" value="Click here for a message" onclick="window.alert('Hello. This is a message.');" />
<br />
<input type="button" value="Click here to see a prompt box" onclick="window.prompt('Enter some data');" />
<script type="text/javascript">
document.write("The URL of this page is " + window.location);
</script>
</body>
</html>
Output:
-
document - 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
Example:
<script type="text/javascript"">
document.write("The domain of this page is " + document.domain);
document.write("<br />" + This page was last modified on " + document.lastModified);
</script>
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 or not.
- navigator object methods:
- javaEnabled() - Returns a boolean (true/false) value indicating whether the web browser has Java enabled or not.
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: