Thursday 24 November 2011

Document Object


·         The document object is part of the windows object.
·         The Document object provides access to all HTML elements in a page, from within a script.

Ø       Document object method

·         write()
·         writeln()
·         getElementById()
·         getElementsByName()
·         getElementsByTagName()
·         open()
·         close()

1.write()

·         write() method writes HTML expression or JavaScript code to a document.

Syntax :  document.write(expr1,expr2…….);

Example

<html>
          <head>
                   <script language="javascript">
                             document.write(“Hello World");
</script>
          </head>
     </html>

Output

Hello World

2.writeln()

·       Identical to the write method with the addition of writing a new line character after each expression.

Syntax :  document.writeln(expr1,expr2…….);

Example

<html>
          <head>
                   <script language="javascript">
                             document.writeln(“Hello World");
                             document.writeln(“Hiiiiiiiiii…….");
</script>
          </head>
     </html>

Output

Hello World
Hiiiiiiiiii…….

3.getElementById()

·         Returns a reference to the first object with the specified id.

     Syntax :  document.getElementById(id)


Example

<html>
          <head>
                   <script language="javascript">
                             function getdata()
                             {
                                      var x;
                                      x =document.getElementById("text1").value;
                                      alert(x);
                             }                          
</script>
          </head>
          <body>        
                   <input type="text" id="text1" /><br/><br/>
                   <input type="button" value="Click Me" onClick="javascript:getdata();"  />
          </body>
     </html>

4.getElementsByName()

·         This method is returns collection of object with the specified name.

Syntax :  document.getElementsByName(name)

Example

<html>
          <head>
                   <script language="javascript">
                             function getdata()
                             {
                                      var x;
                                      x = document.getElementsByName("uname");
                                      alert(x.length);
                             }                          
</script>
          </head>
          <body>        
                   <input type="text" name="uname"/><br/>
                   <input type="text" name="uname"/><br/>
                   <input type="text" name="uname"/><br/>
                   <input type="button" value="Click Here" onClick="getdata();" />
          </body>
     </html>

5.getElementsByTagName()

·         This method returns a collection of object with the specified tag name.

Syntax :  document.getElementsByTagName(tagname)

Example

<html>
          <head>
                   <script language="javascript">
                             function getdata()
                             {
                                      var x;
                                      x = document.getElementsByTagName("input");
                                      alert(x.length);
                             }                          
</script>
          </head>
          <body>        
                   <input type="text" name="uname"/><br/>
                   <input type="text" name="uname"/><br/>
                   <input type="text" name="uname"/><br/><br/>
                   <input type="button" value="Click Here" onClick="getdata();" />
          </body>
     </html>

6.open()

·      Open a stream to collect the output from any document.write or document.writeln method.

7.close()

·      Close an output stream open with document.open method, and display collected data.

Example

<html>
          <head>
                   <script language="javascript">
                             function getdata()
                             {
                                       window.document.open();
                                       window.document.write("Hello");
                                       window.document.close();
                             }                          
</script>
          </head>
     </html>

Posted By : Hemangi Zala

No comments:

Post a Comment