JavaScript Document Object Methods Part II

In this JavaScript tutorial, you will learn about document object methods – getElementsByTagName, getSelection, handleEvent, releaseEvents, routeEvent, write, writeln along with syntax, examples and brief explanation.

getElementsByTagName:

The the getElementsTagName() method returns a collection of objects with the specified TagNAME given in argument. The programmer can enter an asterisk ("*") as the parameter to retrieve a list of all elements within the document.

The general syntax for using the getElementsByName method of document object is as follows:

document.getElementsByTagName(tagname)

for example:

<html>
   <head>
      <script type="text/javascript">
        function Exforinput()
        {
          var test=document.getElementsByTagName("input");
          alert(test.length);
        }
     </script>
   </head>

   <body>
      <input name="Exforsys" type="text" size="30" /><br />
      <input name="Exforsys" type="text" size="30" /><br />
      <input type="button" onclick="Exforinput()"
      value="Click to see the number of tag with input as
      tag name" />
   </body>
</html>

The output of the above program is

and a button with message

Click to see the number of tag with input as tag name

When this button is clicked, the output appears as:

The statement document.getElementsByTagName("input") returns the object with tag name as Input. There are three elements with input as tag name (as seen in the program) so the displayed result is 3.

getSelection:

A programmer can return the contents of a selected text in the current document by using the getSelection()method.

The general syntax for using the getSelection method of document object is as follows:

document.getSelection( )

for example:

<html>
   <head>
      <script type="text/javascript">
      </script>
   </head>

   <body>
      <INPUT TYPE="BUTTON" VALUE="Selected Highlighted Text
      is Displayed!!" onClick="alert(‘You have selected the
      text:\n’+document.getSelection());">
   </body>
</html>

In the above, when the button is pressed, the message:

Selected Highlighted Text is Displayed!!

The selected text in the current document displays as:

You have selected the text: xxxx

The document.getSelection() method returns the contents of a selected text in the current document.

handleEvent:

For the handleEvent method, the event is specified as a parameter and the method calls the corresponding handler for the specified event. When a call of the handleEvent method is made, a search for the corresponding available set of event handler functions is performed. This is then passed to the event for an appropriately mapped handler function.

The general syntax for using the handleEvent method of document object is as follows:

document.handleEvent(event)

releaseEvents:

The releaseEvents method is used for indicating the events that are no longer needed. This is captured by the receiving Document object. The functionality is similar to that of window.releaseEvents() method.

The general syntax for using the releaseEvents method of document object is as follows:

document.releaseEvents(eventType)

In the above, any event of the eventType mentioned in a parameter is released. This is passed down to the Document Object for capturing.

routeEvent:

The routeEvent() method passes all previously captured events of the event type passed through their normal event processes.

The general syntax for using the routeEvent method of document object is as follows:

document.routeEvent(event)

write:

If a programmer wishes to write HTML expressions to the specified document, then it can be done using write method of document object.

The general syntax for using the write method of document object is as follows:

document.write(exp1,exp2,….)

In the above syntax, it is evident that the programmer can write multiple expressions, each separated by commas, and placed in the order of their occurrence. The values given in arguments are converted to a string value, appended to the content of the document window and then interpreted as HTML. This technique can be widely used to create dynamically changing pages.

An example to understand the write method in detail:

<html>
   <body>
      <script type="text/javascript">
         document.write("Welcome to Exforsys!")
      </script>
   </body>
</html>

The above example would give output as below

Welcome to Exforsys!

A simple example where more than one expression using document.write method is written:

<html>
   <body>
      <script type="text/javascript">
          document.write("Welcome All","To Exforsys!","<p
          style=’color:red;’>Training Division</p>")
      </script>
   </body>
</html>

The output of the above program is

Welcome All To Exforsys!

Training Division

writeln:

The functionality of writeln method of document object is similar to that of write method but here in writeln method in addition a new line character is written after each expression. The writeln method places a carriage return after the written value of each expression.

The general syntax for using the writeln method of document object is as follows:

document.writeln(exp1,exp2,….)

for example:

<html>
   <body>
      <script type="text/javascript">
         document.writeln("Welcome to Exforsys!")
      </script>
   </body>
</html>

The above example would give output as below

Welcome to Exforsys!

In the above output, a carriage is placed after the display of output is written.

Author Description

Editorial Team at Exforsys is a team of IT Consulting and Training team led by Chandra Vennapoosa.

JavaScript Document Object Methods Part II