Document Object Model in Javascript
The DOM is W3C (World Wide Web Consortium) standard. It is a standard for accessing the documents. The Document Object Model in Javascript is concerned with the whole html document's elements.
When an html document get loaded in the browser, a document object is created which can be used to add dynamic content to the webpage and to access different elements of the page. The object model defines all the html elements as objects, and also defines the various properties, methods, and events for all the HTML elements.
Properties of document object
Methods of document object
| Property | Description |
|---|---|
| write("sometext") | It displays the specified text on the doucment. |
| writeln("sometext") | It displays the text with newline character at the end. |
| getElementByID() | It returns the element having the given id. |
| getElementByName() | It returns the elements having the specified name. |
| getElementsByTagName() | It returns the elements having the specified tag name. |
| getElementByClassName() | It Returns all the elements having the specified class name. |
Accessing field value by document object
In this example, we are going to input text by user and using document.form1.name.value to get the value of name field.
In this exampledocument is the root element that represents the html document.form1 is the name of the form.name is the attribute name of the form input text, and
value is the property, that returns the value of the input text.
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Document Object Model (DOM) </title>
</head>
<body>
<script>
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>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Document Object Model (DOM) </title>
</head>
<body>
<script>
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>
</body>
</html>
Output
Recommended :