DOM Document

The HTML DOM document object is the owner of all other objects in your web page. After loading the page, a document object is created which is root element that represent the all other object of web page. With help of this document object we can create dynamic element, dynamic content to element.

window.document  

Is same as

document  

Manipulating the HTML element by using document object model(DOM)

Here below are some examples of use the document object to access and manipulate HTML.

Finding HTML Elements

MethodDescription
document.getElementById(id)return an element by having the given element id
getElementsByName()returns all the elements having the given name value.
document.getElementsByTagName(name)return an element by having the given tag name
document.getElementsByClassName(name)return an element by having the given class name

Changing HTML Elements

PropertyDescription
element.innerHTML =  new html contentChange the inner HTML of an element
element.attribute = new valueChange the attribute value of an HTML element
element.style.property = new styleChange the style of an HTML element
MethodDescription
element.setAttribute(attribute, value)Change the attribute value of an HTML element

Adding and Deleting Elements

MethodDescription
document.createElement(element)Will Create an HTML element
document.removeChild(element)Will remove an HTML element
document.appendChild(element)Will add an HTML element
document.replaceChild(new, old)Will replace an HTML element
document.write(text)Write into the HTML output stream

Finding HTML Objects

The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML5.

Later, in HTML DOM Level 3, many more objects, collections, and properties were added. Here is below the list for those.

PropertyDescriptionDOM
document.anchorsReturns all <a> elements that have a name attribute1
document.appletsReturns all <applet> elements (Deprecated in HTML5)1
document.baseURIReturns the absolute base URI of the document3
document.bodyReturns the <body> element1
document.cookieReturns the document’s cookie1
document.doctypeReturns the document’s doctype3
document.documentElementReturns the <html> element3
document.documentModeReturns the mode used by the browser3
document.documentURIReturns the URI of the document3
document.domainReturns the domain name of the document server1
document.domConfigObsolete. Returns the DOM configuration3
document.embedsReturns all <embed> elements3
document.formsReturns all <form> elements1
document.headReturns the <head> element3
document.imagesReturns all <img> elements1
document.implementationReturns the DOM implementation3
document.inputEncodingReturns the document’s encoding (character set)3
document.lastModifiedReturns the date and time the document was updated3
document.linksReturns all <area> and <a> elements that have a href attribute1
document.readyStateReturns the (loading) status of the document3
document.referrerReturns the URI of the referrer (the linking document)1
document.scriptsReturns all <script> elements3
document.strictErrorCheckingReturns if error checking is enforced3
document.titleReturns the <title> element1
document.URLReturns the complete URL of the document1

Accessing field value by document object

In the below example, we will be getting the value of input text entered by user. Here, we are using document.myform.name.value to get the value of name field.

Here, document is the root element that represents the html document, myform is the name of the form, name is the attribute name of the input text, value is the property, that will returns the value of the input text.

Input:-
</html> 
<html>
   <head>
      <script type="text/javascript">  
         function printformval(){  
         var name=document.myform.name.value;  
         alert("Welcome: "+name);  
         }  
      </script>   
   </head>
   <body>
      <form name="myform">  
         Enter Name:<input type="text" name="name"/>  
         <input type="button" onclick="printformval()" value="Enter name"/>  
      </form>
   </body>
</html>

Output:-