Document Object Model

1. Document Object
2. Properties of document object
3. Methods of document object
4. Example of document object

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

1. window.document

Is same as

Backward Skip 10sPlay VideoForward Skip 10s

ADVERTISEMENT

1. document

According to W3C - "The W3C Document Object Model (DOM) is a platform and
language-neutral interface that allows programs and scripts to dynamically access and
update the content, structure, and style of a document."

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:

Method Description

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.

Let's see the simple example of document object that prints name with welcome
message.

1. <script type="text/javascript">
2. function printvalue(){
3. var name=document.form1.name.value;
4. alert("Welcome: "+name);
5. }
6. </script>
7.
8. <form name="form1">
9. Enter Name:<input type="text" name="name"/>
10. <input type="button" onclick="printvalue()" value="print name"/>
11. </form>
 Javascript - document.getElementById()
method
1. getElementById() method
2. Example of getElementById()

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.

1. <script type="text/javascript">
2. function getcube(){
3. var number=document.getElementById("number").value;
4. alert(number*number*number);
5. }
6. </script>
7. <form>
8. Enter No:<input type="text" id="number" name="number"/><br/>
9. <input type="button" value="cube" onclick="getcube()"/>
10. </form>

GetElementsByClassName()
The getElementsByClassName() method is used for selecting or getting the elements
through their class name value. This DOM method returns an array-like object that
 consists of all the elements having the specified classname. On calling the
getElementsByClassName() method on any particular element, it will search the
whole document and will return only those elements which match the specified or
given class name.

Syntax
1. var ele=document.getELementsByClassName('name');

Here, name is the mandatory argument to be passed. It is the string that specifies
either a single classname or multiple class names to match.

Example of getElementsByClassName() Method

Let's look at some examples to know and understand the practical implementation of
the method.

Example

It is a simple class implementation that returns an array-like object on invoking the

variable x.

1. <html>
2. <head> <h5>DOM Methods </h5> </head>
3. <body>
4. <div class="Class">
5. This is a simple class implementation
6. </div>
7. <script type="text/javascript">
8. var x=document.getElementsByClassName('Class');
9. document.write("On calling x, it will return an arrsy-like object: <br>"+x);
10. </script>
11. </body>
12. </html>

Difference between getElementsByClassName(),

querySelector() and querySelectorAll() Methods
getElementsByClassName(): It matches the elements with the specified class name,
and returns a set of the matched elements. The returned elements are
live HTML collection of elements. These live elements can be further updated if any
changes are made in the Document Object Model.
 querySelector(): It returns only a single element that matches the specified
classname. If it does not find any matching element, it returns null.

The main point to understand is that all the above-described methods return either
one element or a list, but the getELementsByClassName() method serves
the dynamic updation, and the other two methods serve for the static.

Javascript - document.getElementsByName()
method
The document.getElementsByName() method returns all the element of specified
name.

The syntax of the getElementsByName() method is given below:

1. document.getElementsByName("name")

Here, name is required.

Backward Skip 10sPlay VideoForward Skip 10s

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.

1. <script type="text/javascript">
2. function totalelements()
3. {
4. var allgenders=document.getElementsByName("gender");
5. alert("Total Genders:"+allgenders.length);
6. }
7. </script>
8. <form>
9. Male:<input type="radio" name="gender" value="male">
10. Female:<input type="radio" name="gender" value="female">
11.
12. <input type="button" onclick="totalelements()" value="Total Genders">
13. </form>

Javascript -
document.getElementsByTagName() method
The document.getElementsByTagName() method returns all the element of
specified tag name.

The syntax of the getElementsByTagName() method is given below:

1. document.getElementsByTagName("name")

Here, name is required.

Example of document.getElementsByTagName() method

In this example, we going to count total number of paragraphs used in the
document. To do this, we have called the document.getElementsByTagName("p")
method that returns the total paragraphs.

1. <script type="text/javascript">
2. function countpara(){
3. var totalpara=document.getElementsByTagName("p");
4. alert("total p tags are: "+totalpara.length);
5.
6. }
7. </script>
8. <p>This is a pragraph</p>
9. <p>Here we are going to count total number of paragraphs by getElementByTagNa
me() method.</p>
10. <p>Let's see the simple example</p>
11. <button onclick="countpara()">count paragraph</button>

Output of the above example

This is a pragraph
 Here we are going to count total number of paragraphs by getElementByTagName()
method.

Let's see the simple example

count paragraph

Another example of
document.getElementsByTagName() method
In this example, we going to count total number of h2 and h3 tags used in the
document.

1. <script type="text/javascript">
2. function counth2(){
3. var totalh2=document.getElementsByTagName("h2");
4. alert("total h2 tags are: "+totalh2.length);
5. }
6. function counth3(){
7. var totalh3=document.getElementsByTagName("h3");
8. alert("total h3 tags are: "+totalh3.length);
9. }
10. </script>
11. <h2>This is h2 tag</h2>
12. <h2>This is h2 tag</h2>
13. <h3>This is h3 tag</h3>
14. <h3>This is h3 tag</h3>
15. <h3>This is h3 tag</h3>
16. <button onclick="counth2()">count h2</button>
17. <button onclick="counth3()">count h3</button>
 Javascript - innerHTML
1. javascript innerHTML
2. Example of innerHTML property

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.

1. <script type="text/javascript" >

2. function showcommentform() {
3. var data="Name:<input type='text' name='name'><br>Comment:<br><textarea r
ows='5' cols='80'></textarea>
4. <br><input type='submit' value='Post Comment'>";
5. document.getElementById('mylocation').innerHTML=data;
6. }
7. </script>
8. <form name="myForm">
9. <input type="button" value="comment" onclick="showcommentform()">
10. <div id="mylocation"></div>
11. </form>
 Show/Hide Comment Form Example using
innerHTML
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>First JS</title>
5. <script>
6. var flag=true;
7. function commentform(){
8. var cform="<form action='Comment'>Enter Name:<br><input type='text' name='name'/>
<br/>
9. Enter Email:<br><input type='email' name='email'/><br>Enter Comment:<br/>
10. <textarea rows='5' cols='70'></textarea><br><input type='submit' value='Post Commen
t'/></form>";
11. if(flag){
12. document.getElementById("mylocation").innerHTML=cform;
13. flag=false;
14. }else{
15. document.getElementById("mylocation").innerHTML="";
16. flag=true;
17. }
18. }
19. </script>
20. </head>
21. <body>
22. <button onclick="commentform()">Comment</button>
23. <div id="mylocation"></div>
24. </body>
25. </html>