JavaScript Tutorial

DOM In Java Script
Previous Home Next

Javascript provide DOM ( Document Object Model ) developed by the World Wide Web Consortium. its describes how all elements in an HTML page, like input fields, images, paragraphs etc .

This specification provides a platform and language-neutral interface that allows programs and scripts to dynamically access and change the content, structure and style of a document —usually HTML or XML—by providing a structured set of objects that correspond to the document’s elements.

DOM Types :

Javascript provide's several type of DOM Object.

DOM object Definition
document Represents the root node of the DOM tree and also Returns the document object for the page .
element its Represents an instance of most structures and sub-structures in the DOM.
nodeList A nodeList is equivalent to an array, but it is an array specific to storing elements.

 

There are a number of JavaScript methods specified by the DOM which allow you to access its structure.

DOM Method Definition
getElementsByTagName(name) nodeList Returns a nodeList of any elements that have a given tag specified by name.
element getElementById() its Returns the element uniquely identified by its id identifier.
document.getElementsByName() its method returns all the element of specified name.
innerHTML This property can be used to write the dynamic html on the html document.

Example of document.getElementsByName() method :


<html>
<head>    
<script >  
    
function prasun()  
 {  
    
var all language =document.getElementsByName("language");  
    alert("Total language:"+all language.length);  
    }
  
    </script>  
    <form>  
    Hindi:<input type="radio" name="language" value="Hindi">  
    English:<input type="radio" name=
	"language" value="English">  
    Sanskrit:<input type="radio" name=
	"language" value="Sanskrit">  
     
 
<input type="button" onclick=
"prasun()" value="language">  
 </form> 
</html>
</head>  

Output :

Example of document.getElementById() :


<html>
<head>

<script >
function notEmpty(){

	var myTextField = document.getElementById('myText');
	if(myTextField.value != "")
		alert("You entered: " + myTextField.value)
	else
		alert("prasant say enter some text ")		
}
</script>
<input type='text' id='myText' />
<input type='button' onclick='notEmpty()' value='CLICK' />

</html>
</head>

Output :

Previous Home Next

Tolal:0 Click:

Show All Comments

Did not find what you were looking for leave your name and message. We will revert within 24 hours
Name:
eMail:
Comment / Feedback: