Java Script 3

(05) A- JavaScript Programming
JavaScript Programming
Presented by
Dr. Geeta Mete
Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

Unit 3: The Document Object

• The Document Object
• Writing to Documents
• Document related functions Forms and Forms-
based Data : The Form Object
• Working with Form Elements and Their
Properties ,Event related with form

Document Object Model

• The document object represents the whole html
document.
• When html document is loaded in the browser, it
becomes a document object. It is the root
element that represents the html document. It
has properties and methods. By the help of
document object, we can add dynamic content to
our web page.
• As mentioned earlier, it is the object of window.
• So window.document Is same as document
Document Object Model

• Properties of
document
object
• Let's see the
properties of
document
object that
can be
accessed and
modified by
the document
object.

Methods of document object

• We can access and change the contents of document by its methods.
• The important methods of document object are as follows:
• write("string") writes the given string on the doucment.

• writeln("string") writes the given string on the doucment
with newline character at the end.
• getElementById() returns the element having the given id
value.
• getElementsByName() returns all the elements having the given
name value.
• getElementsByTagName() returns all the elements having the given
tag name.
• getElementsByClassName() returns all the elements having the given
class name.

Accessing field value by document

object
• In this example, we are going to get the value of input text by user.
Here, we are using document.form1.name.value to get the value of
name field.
• Here, document is the root element that represents the html

document.
• form1 is the name of the form.
• name is the attribute name of the input text.

• value is the property, that returns the value of the input text.
Dom1.html
document.getElementById() method
• The document.getElementById() method returns the element of
specified id.
• In the previous page, we have used document.form1.name.value to

get the value of the input value. Instead of this, we can use
document.getElementById() method to get value of the input text.
But we need to define id for the input field.
• Let's see the simple example of document.getElementById()

method that prints cube of the given number.
• Dom2.html

document.getElementsByName() method
• getElementsByName() method
• Example of getElementsByName()
• The document.getElementsByName() method
returns all the element of specified name.
• The syntax of the getElementsByName() method

is given below:
• document.getElementsByName("name")
• Here, name is required.
Example
• Example of document.getElementsByName()
method
• In this example, we going to count total
number of genders. Here, we are using
getElementsByName() method to get all the
genders.
• Dom3.html
document.getElementsByTagName()
method
• getElementsByTagName() method
• Example of getElementsByTagName()
• The document.getElementsByTagName() method
returns all the element of specified tag name.
• The syntax of the getElementsByTagName() method is

given below:
• document.getElementsByTagName("name")
• Here, name is required.

Example
Example of document.getElementsByTagName()
method
number of paragraphs used in the document.
To do this, we have called the
document.getElementsByTagName("p")
method that returns the total paragraphs.
dom4.html

Example
• Another example of
document.getElementsByTagName() method
number of h2 and h3 tags used in the
document.
dom5.html

Javascript - innerHTML
• The innerHTML property can be used to write the dynamic
html on the html document.
• It is used mostly in the web pages to generate the dynamic
html such as registration form, comment form, links etc.
• Example of innerHTML property
• In this example, we are going to create the html form when
user clicks on the button.
• In this example, we are dynamically writing the html form
inside the div name having the id mylocation. We are
identifing this position by calling the
document.getElementById() method.
• Dom6.html
Example
• Show/Hide Comment Form Example using
innerHTML
• Dom7.html

Javascript - innerText
• Example of innerText property
• The innerText property can be used to write
the dynamic text on the html document. Here,
text will not be interpreted as html text but a
normal text.
• It is used mostly in the web pages to generate

the dynamic content such as writing the
validation message, password strength etc.
Example
• In this example, we are going to display the
password strength when releases the key
after press.
• Dom8.html

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.

Types of Form Validation

• 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.
Examples
• FormValidation1.html

End of Unit 3

Java Script 3

Uploaded by

Copyright:

Available Formats

Java Script 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Java Script 3

Uploaded by

Copyright:

Available Formats

(05) A- JavaScript Programming

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

Unit 3: The Document Object

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

Document Object Model

Document Object Model

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

Methods of document object

• The important methods of document object are as follows:

• write("string") writes the given string on the doucment.

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

Accessing field value by document

• Here, document is the root element that represents the html

• form1 is the name of the form.

• name is the attribute name of the input text.

• In the previous page, we have used document.form1.name.value to

• Let's see the simple example of document.getElementById()

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

• The syntax of the getElementsByName() method

• The syntax of the getElementsByTagName() method is

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

• It is used mostly in the web pages to generate

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

Types of Form Validation

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

Unit 3 : Document Object Model Presented By : Dr. Geeta Mete

You might also like