Home >>Javascript Tutorial >Javascript Document Object Model(DOM)
Javascript Document Object Model(DOM)
Document Object Model in JavaScript
The document object model in JavaScript generally represents the whole document of HTML. Whenever a HTML document is not loaded in the browser it becomes a document object, in other words; it is the root element representing the HTML document. It possess properties and methods and with the help of document object, dynamic content can be added to the webpage.
Please note that window.document is similar as document.
Let's Have A Look At The Properties Of Document Object In JavaScript:
Here are the properties of document object that can be modified and accessed by the document object in JavaScript:
Methods Of Document Objects In Javascript
By the methods of the document object, a document can be accessed and changes can be made. Here are some of the most important methods of document:
| Method | Description |
|---|---|
| write("string") | This method writes the given string on the document. |
| writeln("string") | This method writes the given string on the document with newline character at the end. |
| getElementById() | This method returns the element having the provided id value. |
| getElementsByName() | This method returns all the elements having the given name value. |
| getElementsByTagName() | This method returns all the elements having the given tag name. |
| getElementsByClassName() | This method returns all the elements having the given class name. |
Let's Understand To Access Field Value By The Document Object
Here is an example to let you understand the document object with these following parameters included:
- In this example, document is the root element representing the html document.
- The name of the form is 'form1'.
- The attribute name of the input text is 'name'.
- The property that returns the value of the input text is 'value'
In this example, the value of the input text by the user will be derived and document.form1.value is being used to get the value of the name field. All the terms and parameters are explained above.
Here is the example of a document object that prints name with a welcome message:
<script type="text/javascript">
function printvalue()
{
var name=document.form1.name.value;
alert("Welcome: "+name);
}
</script>
<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>