Scribd
Upload
37 views

Javas Script 7th Class

Uploaded by

RAVI Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

Javas Script 7th Class

Uploaded by

RAVI Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

IT SPRING EDUTECH

A complete web solution

JavaScript - Document Object Model or

DOM

A Document object represents the HTML document that is displayed


in that window. The Document object has various properties that
refer to other objects which allow access to and modification of
document content.
The way a document content is accessed and modified is called
the Document Object Model, or DOM. The Objects are organized in a
hierarchy. This hierarchical structure applies to the organization of
objects in a Web document.
 Window object − Top of the hierarchy. It is the outmost element
of the object hierarchy.
 Document object − Each HTML document that gets loaded into a
window becomes a document object. The document contains
the contents of the page.
 Form object − Everything enclosed in the <form>...</form> tags
sets the form object.
 Form control elements − The form object contains all the
elements defined for that object such as text fields, buttons,
radio buttons, and checkboxes.
Here is a simple hierarchy of a few important objects −
There are several DOMs in existence. The following sections explain
each of these DOMs in detail and describe how you can use them to
access and modify document content.
 The Legacy DOM − This is the model which was introduced in
early versions of JavaScript language. It is well supported by all
browsers, but allows access only to certain key portions of
documents, such as forms, form elements, and images.
 The W3C DOM − This document object model allows access and
modification of all document content and is standardized by the
World Wide Web Consortium (W3C). This model is supported by
almost all the modern browsers.
 The IE4 DOM − This document object model was introduced in
Version 4 of Microsoft's Internet Explorer browser. IE 5 and
later versions include support for most basic W3C DOM
features.

DOM compatibility
If you want to write a script with the flexibility to use either W3C DOM
or IE 4 DOM depending on their availability, then you can use a
capability-testing approach that first checks for the existence of a
method or property to determine whether the browser has the
capability you desire. For example −
if (document.getElementById) {
// If the W3C method exists, use it
} else if (document.all) {
// If the all[] array exists, use it
} else {
// Otherwise use the legacy DOM
}

What is Document Object Model (DOM)

The Document Object Model (DOM) is an application programming


interface (API) for manipulating HTML documents.

The DOM represents a document as a tree of nodes. It provides API


that allows you to add, remove, and modify parts of the document
effectively.

Note that the DOM is cross-platform and language-independent ways


of manipulating HTML and XML documents.

A document as a hierarchy of nodes

The DOM represents an HTML or XML document as a hierarchy of


nodes. Consider the following HTML document:

<html>
<head>
<title>JavaScript DOM</title>
</head>
<body>
<p>Hello DOM!</p>
</body>
</html>
Code language: HTML, XML (xml)

The following tree represents the above HTML document:


In this DOM tree, the document is the root node. The root node has
one child which is the <html> element. The <html> element is called
the document element.

Each document can have only one document element. In an HTML


document, the document element is the <html> element. Each markup
can be represented by a node in the tree.

Node Types

Each node in the DOM tree is identified by a node type. JavaScript uses
integer numbers to determine the node types.

The following table illustrates the node type constants:

Constant Value Description


Constant Value Description

Node.ELEMENT_NODE 1 An Element node


like <p> or <div>.

Node.TEXT_NODE 3 The actual Text inside


an Element or Attr.

Node.CDATA_SECTION_NODE 4 A CDATASection, such


as <!CDATA[[ … ]]>.

Node.PROCESSING_INSTRUCTION_NODE 7 A ProcessingInstruction of
an XML document, such as <?xml-
stylesheet … ?>.

Node.COMMENT_NODE 8 A Comment node, such as <!-- …


-->.

Node.DOCUMENT_NODE 9 A Document node.

Node.DOCUMENT_TYPE_NODE 10 A DocumentType node, such


as <!DOCTYPE html>.

Node.DOCUMENT_FRAGMENT_NODE 11 A DocumentFragment node.

To get the type of a node, you use the nodeType property:

node.nodeType
Code language: CSS (css)

You can compare the nodeType property with the above constants to
determine the node type. For example:

if (node.nodeType == Node.ELEMENT_NODE) {
// node is the element node
}
Code language: JavaScript (javascript)

The nodeName and nodeValue properties

A node has two important properties: nodeName and nodeValue that


provide specific information about the node.

The values of these properites depends on the node type. For example,
if the node type is the element node, the nodeName is always the same as
element’s tag name and nodeValue is always null.

For this reason, it’s better to test node type before using these
properties:

if (node.nodeType == Node.ELEMENT_NODE) {
let name = node.nodeName; // tag name like <p>
}
Code language: JavaScript (javascript)

Node and Element

Sometime, it’s easy to confuse between the Node and the Element.

A node is a generic name of any object in the DOM tree. It can be any
built-in DOM element such as the document. Or it can be any HTML
tag specified in the HTML document like <div> or <p>.

An element is a node with a specific node type Node.ELEMENT_NODE,


which is equal to 1.

In other words, the node is generic type of the element. The element is
a specific type of the node with the node type Node.ELEMENT_NODE.

The following picture illustrates the relationship between


the Node and Element types:
Note that the getElementById() and querySelector() returns an object with
the Element type
while getElementsByTagName() or querySelectorAll() returns NodeList which is a
collection of nodes.

Node Relationships

Any node has relationships to other nodes in the DOM tree. The
relationships are the same as the one described in a traditional family
tree.

For example, <body> is a child node of the <html> node, and <html> is
the parent of the <body> node.

The <body> node is the sibling of the <head> node because they share the
same immediate parent, which is the <html> element.

The following picture illustrates the relationships between nodes:


JavaScript - Form Validation
Form validation normally used to occur at the server, after the client
had entered all the necessary data and then pressed the Submit
button. If the data entered by a client was incorrect or was simply
missing, the server would have to send all the data back to the client
and request that the form be resubmitted with correct information.
This was really a lengthy process which used to put a lot of burden
on the server.
JavaScript provides a way to validate form's data on the client's
computer before sending it to the web server. Form validation
generally performs two functions.
 Basic Validation − First of all, the form must be checked to make
sure all the mandatory fields are filled in. It would require just a
loop through each field in the form and check for data.
 Data Format Validation − Secondly, the data that is entered must
be checked for correct form and value. Your code must include
appropriate logic to test correctness of data.
Example
We will take an example to understand the process of validation.
Here is a simple form in html format.
Live Demo

<html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>

<body>
<form action = “data base name" name = "myForm" onsubmit =
"return(validate());">
<table cellspacing = "2" cellpadding = "2" border =
"1">

<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>

<tr>
<td align = "right">EMail</td>
<td><input type = "text" name = "EMail" /></td>
</tr>

<tr>
<td align = "right">Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>

<tr>
<td align = "right">Country</td>
<td>
<select name = "Country">
<option value = "-1" selected>[choose
yours]</option>
<option value = "1">USA</option>
<option value = "2">UK</option>
<option value = "3">INDIA</option>
</select>
</td>
</tr>

<tr>
<td align = "right"></td>
<td><input type = "submit" value = "Submit"
/></td>
</tr>

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

Output

Basic Form Validation


First let us see how to do a basic form validation. In the above form,
we are calling validate() to validate data when onsubmit event is
occurring. The following code shows the implementation of this
validate() function.
<script type = "text/javascript">
<!--
// Form validation code will come here.
function validate() {

if( document.myForm.Name.value == "" ) {


alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" ) {
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" || isNaN(
document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 ) {

alert( "Please provide a zip in the format #####."


);
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" ) {
alert( "Please provide your country!" );
return false;
}
return( true );
}
//-->
</script>

Data Format Validation


Now we will see how we can validate our entered form data before
submitting it to the web server.
The following example shows how to validate an entered email
address. An email address must contain at least a ‘@’ sign and a dot
(.). Also, the ‘@’ must not be the first character of the email address,
and the last dot must at least be one character after the ‘@’ sign.
Example
Try the following code for email validation.
<script type = "text/javascript">
<!--
function validateEmail() {
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");

if (atpos < 1 || ( dotpos - atpos < 2 )) {


alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
//-->
</script>

JavaScript - Multimedia
The JavaScript navigator object includes a child object
called plugins. This object is an array, with one entry for each plug-in
installed on the browser. The navigator.plugins object is supported
only by Netscape, Firefox, and Mozilla only.
Example
Here is an example that shows how to list down all the plug-on
installed in your browser −
Live Demo

<html>
<head>
<title>List of Plug-Ins</title>
</head>

<body>
<table border = "1">
<tr>
<th>Plug-in Name</th>
<th>Filename</th>
<th>Description</th>
</tr>

<script language = "JavaScript" type =


"text/javascript">
for (i = 0; i<navigator.plugins.length; i++) {
document.write("<tr><td>");
document.write(navigator.plugins[i].name);
document.write("</td><td>");
document.write(navigator.plugins[i].filename);
document.write("</td><td>");
document.write(navigator.plugins[i].description);
document.write("</td></tr>");
}
</script>
</table>
</body>
</html>

Output

Checking for Plug-Ins


Each plug-in has an entry in the array. Each entry has the following
properties −
 name − is the name of the plug-in.
 filename − is the executable file that was loaded to install the
plug-in.
 description − is a description of the plug-in, supplied by the
developer.
 mimeTypes − is an array with one entry for each MIME type
supported by the plug-in.
You can use these properties in a script to find out the installed plug-
ins, and then using JavaScript, you can play appropriate multimedia
file. Take a look at the following example.
<html>
<head>
<title>Using Plug-Ins</title>
</head>

<body>
<script language = "JavaScript" type = "text/javascript">
media = navigator.mimeTypes["video/quicktime"];

if (media) {
document.write("<embed src = 'quick.mov' height =
100 width = 100>");
} else {
document.write("<img src = 'quick.gif' height = 100
width = 100>");
}
</script>
</body>
</html>

Output
NOTE − Here we are using HTML <embed> tag to embed a
multimedia file.

Controlling Multimedia
Let us take one real example which works in almost all the browsers
−
Live Demo
<html>
<head>
<title>Using Embeded Object</title>

<script type = "text/javascript">


<!--
function play() {
if (!document.demo.IsPlaying()) {
document.demo.Play();
}
}
function stop() {
if (document.demo.IsPlaying()) {
document.demo.StopPlay();
}
}
function rewind() {
if (document.demo.IsPlaying()) {
document.demo.StopPlay();
}
document.demo.Rewind();
}
//-->
</script>
</head>

<body>
<embed id = "demo" name = "demo"
src = "http://www.amrood.com/games/kumite.swf"
width = "318" height = "300" play = "false" loop =
"false"
pluginspage =
"http://www.macromedia.com/go/getflashplayer"
swliveconnect = "true">

<form name = "form" id = "form" action = "#" method =


"get">
<input type = "button" value = "Start" onclick =
"play();" />
<input type = "button" value = "Stop" onclick =
"stop();" />
<input type = "button" value = "Rewind" onclick =
"rewind();" />
</form>
</body>
</html>
Output
If you are using Mozilla, Firefox or Netscape, then

You might also like