Html theory session 15
Document Object
The HTML DOM provides a document object which is used within JavaScript to access all HTML elements presented on the page. The document object is one of the basic JavaScript object. It represents the entire HTML document. It provides access to other elements, such as links, anchors, and so on.
Each HTML page has only one document object. This object is created when the BODY element is loaded on the Web page. The document object is also the part of the window object and is accessed as window.document.
The document object provides properties that allow the user to specify or retrieve the information about the elements and its content.
Property Description
body Provides access to the BODY element.
title Specifies or retrieves the title of the document.
anchors Retrieves the collection containing all the anchors contained in a document.
forms Retrieves the collection containing all the forms contained in a document.
images Retrieves the collection containing all the images contained in a document.
links Retrieves the collection containing all the links contained in a document.
<!DOCTYPE html>
<head>
<title> Document Object </title>
<script>
function change_image()
{
varimgText=document.getElementById(‘myImg’).alt;
if(imgText==”ford”)
{
document.getElementById(‘myImg’).src=”ferrari.jpg”;
document.getElementById(‘myImg’).alt =”ferrari”;
document.getElementById(‘mytext’).value =”Ferrari Car”;
}
else
{
document.getElementById(‘myImg’).src=”ford.jpg”;
document.getElementById(‘myImg’).alt =”ford”;
document.getElementById(‘mytext’).value =”Ford Car”;
}
}
</script>
</head>
<body>
<imgid=”myImg” src=”ford.jpg”width=”300” height=”300”alt=”ford” /><br/>
Model: <input type=”text” id=”mytext”
value=”Ford Car” readonly=”readonly”/><br/><br/>
<input type=”button” value=”Change Image” onclick=”change_ image()”/>
</body>
</html>
In the code, image and text elements on the page are accessed using document. getElementById() method. The method retrieves the elements based on the specified ids and sets new values for their properties. This is all done at runtime, and not through markup. The use of document.getElementById() enables to access the elements within JavaScript function and change them dynamically.
Figures 15.22 and 15.23 show the initial image and changed image respectively on clicking Change Image button .
Form Object
Form accepts input from the user and sends data for validation. JavaScript allows you to process and validate the form data. A single HTML document can contain multiple forms. The DOM specification provides a form object that represents an HTML form. A form object is created for each <form> tag in an HTML document.
Code Snippet 16 demonstrates the use of the form object that counts number of controls in a form.
<!DOCTYPE html>
<head>
<title> Form Object </title>
<script>
function display_length()
{
var count =document.getElementById(“form1”).length;
alert(‘Number of controls on the form: ‘ + count);
}
</script>
</head>
<body>
<form id=”form1” action=”welcome.php”>
First name: <input type=”text” name=”firstname” value=”John” /><br />
Last name: <input ty
pe=”text” name=”lastname” value=”Smith” /><br />
Age : <input type=”text” name=”age” value=”40” /><br />
<input type=”button” value=”Controls”onClick=”display_ length()”/>
</form>
</body>
</html>
In the code, a Web page contains a form with input elements, such as text and a button. The form is accessed in JavaScript using the id attribute which is set to form1. Then, the length property of the form object is used to retrieve the number of elements in a form.
No comments:
Post a Comment