Scribd
Upload
106 views

Document Object Model

The document represents the entire HTML document as an object. It is the root node of the document object model (DOM) tree. The document object has properties and methods that allow JavaScript to dynamically access and update the content, structure, and style of an HTML document. Key properties of the document object include document.forms to access form elements and document.getElementById() to retrieve an element by its ID. Common methods include write() and writeln() to output content, and getElementsByTagName() to select elements by tag name.

Uploaded by

Arul
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
106 views

Document Object Model

The document represents the entire HTML document as an object. It is the root node of the document object model (DOM) tree. The document object has properties and methods that allow JavaScript to dynamically access and update the content, structure, and style of an HTML document. Key properties of the document object include document.forms to access form elements and document.getElementById() to retrieve an element by its ID. Common methods include write() and writeln() to output content, and getElementsByTagName() to select elements by tag name.

Uploaded by

Arul
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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

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 characte

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>  

Output of the above example

Enter Name:  

Next Topic Document getElementById() Method

You might also like