JavaScript Document Object Methods – Part I
In this JavaScript tutorial, you will learn about methods of document object along with syntax and examples. This section covers captureEvents, open, close, getElementById, getElementsByName methods with explanations for each method.
Methods of document Object:
captureEvents:
The captureEvents method instructs the document to capture and handle all events of a particular type.
The general syntax for using the captureEvents method of document object is as follows:
document.captureEvents(eventType)
The list of eventType in an earlier section of this tutorial called Event Handler in JavaScript.
For example:
document.captureEvents(Event.MOUSEMOVE);
In the above, the MouseMove event is captured. When the MouseMove event occurs, then the event handler function defined in document.onMouseMove executes.
open:
The output stream is opened by document.open() method. This is opened to collect the output of subsequent document.write() or document.writeln methods.
The general syntax for using the open method of document object is as follows:
document.open(mimetype,replace)
In the above syntax, both mimetype and replace are optional. The mimetype refers to the type of document the programmer wants to write to. The default value of this is "text/html". When replace is mentioned, it causes the history entry for the new document to inherit the history entry from the parent document.
close:
The close method of a document object is used for closing the output stream previously opened with the document.open method. This also collects and displays the collected data in this process.
The output stream is opened by document.open() method. This is opened to collect the output of subsequent document.write() or document.writeln methods. Once all the writes are performed, the document.close() method causes any output written to the output stream to be displayed in the document opened in a secondary window.
The general syntax for using the close method of document object is as follows:
document.close()
Let us see an example to understand the concept of open and close method in detail:
|
The output of the above program is a button with message
Click Here!
and on clicking this the output appears in a new document exfor as
Welcome to Exforsys!
The document exfor closes after this statement exfor.close().
getElementById:
In the getElementById method, the object id is specified in argument getElementById() and this returns the reference to the first object with the specified ID.
The general syntax for using the getElementById method of document object is as follows:
document.getElementById(id)
for example:
|
The output of the above program is:
Click for Dancing Doll
with the doll.jpg displays
When the above link is clicked, the doll.jpg displays with position shifted to the right. The statement document.getElementById(‘doll’) gives reference to the object with id as doll and the attributes are applied to that object.
getElementsByName:
The getElementById method was used for returning the reference to the first object with the specified ID. The programmer can also get a collection of objects with the object name given in argument by using the method getElementsByName. The getElementsByName() method returns a collection of objects with the specified Name given in argument. This method returns an array of elements with a name attribute whose value matches that of the parameter given.
The general syntax for using the getElementsByName method of a document object is as follows:
document.getElementsByName(name)
for example:
|
The output of the above program is
and a button with the message:
Click to see the number of input box
and when this is clicked, the output appears as:
2
The statement document.getElementsByName("Exforsys") returns the object with object name Exforsys. There are two input box as objects with name Exforsys, so the result displayed is 2.
