javaScript document object

the document object can be used to manipulate the html document within a window or frame.

the document object hold a complete html document which loaded into a web browser.

the document object is the root node of the html document and the 'owner' of all other nodes (element node, text node, attribute node etc.)

the document object is the property of window object and can be accessed as:

         window.document

JavaScript - document object properties

the document object provide the rich set of properties that can use for access html document information and set the document properties.

syntax:

         document.property_name

or

         window.document.property_name
propertydescription
bodyreturns the <body> element of the document
cookiesets or gets the string value of a cookie
doctypereturns the document type definition(dtd) of the current document
documentElementreturns the root node of the document (the <html> element)
documenturisets or returns the location of the document
domainreturns the domain name of the server that loaded the document
headreturns the head element of the document
inputEncodingreturns the character encoding, used for the document
lastModifiedreturns date and time the document was last modified
readyStatereturns a value that indicates the current state of the object
titlesets or returns the title of the document
urlreturns the full url of the document

example :

the window.document can be written without the window perfix.

  <script>    function     display(){
  
  document.write("the <body> element____"+document.body+"<br/>");
                    
  document.write("get doctype of the document____"+document.doctype+"<br/>");
                    
  document.write("get <html> element____"+document.documentElement+"<br/>");
                    
  document.write("get the location ____"+document.documenturi+"<br/>");
                    
  document.write("returns the domain name____"+document.domain+"<br/>");
                    
  document.write("get <head> element____"+document.head+"<br/>");
                    
  document.write("document char encoding_"+document.inputEncoding+"<br/>");
                    
  document.write("the title of the document____"+document.title+"<br/>");
                    
  document.write("the url of the document____"+document.url+"<br/>");
                    
                }
    </script>                

the document.lastModified a very useful property this holds a string containing date and time that the document was last modified(saved).

<script>  
 function    dates(){
               
             var   date   =  new  Date(document.lastModified);
                           
             var   string =  document.lastModified;
                           
alert("the html document last modification date object______"+date+"\n\n"+
                           
              "the html document last modification string value_____"+string);

}  </script>                                 

JavaScript - document object methods

the document object supported five methods for controlling output stream to the html document.

the document.open() method opens a document for writing

the document.close() method closes an output stream and forces the sent data to display

the document.write() method writes html expressions or js code to a document. the writeln() method same as write(), but adds a newline('\n') character after each statement.

<script>
   
   function   output_stream(){
                  
       	var html  = "<html><head><title>this is controlling output stream</title>";
                               
             html += "</head><body><p>this is the first paragraph</p>";
                                   
             html += "<h1>this is the first paragraph</h1>";
                                   
                                            document.open("text/html");

                                            document.write(html);
                                            
                                            document.close(); 
                  }    </script>

JavaScript - document collections

the document collections are used to access the html document elements objects, and the collections are automatically updated when the underlying document is changed.

the collections offers method and properties for traversing the list.

the length property returns the number of items in the collection.

         document.collection.length

the item(index) returns node at the given zero-based index into the list. returns null if the index is out of range.

         document.collection.item(index)
collection namedescription
anchors[]returns a collection of all the anchors(<a>) in the document
embeds[]returns a collection of all the embedded objects in the document
forms[]returns a collection of all the forms in the document
images[]returns a collection of all the images(<img>) in the document
links[]returns a collection of all the links(<a>) in the document
plugins[]returns a list of the available plugins
styleSheets[]returns a list of the stylesheet objects on the current document
<script>  function(){

var  total_img=document.images.length;//return the total number of img object in the  current document
                           
var  total_links  =  document.links.length;
                           
var  img_array  =  document.images; 
                           
var  link_array =document.links; //returns an array of all hyperlinks in the current document.
                           
                        }</script>                            

the below example return the src and href attribute value of the first image and link in the document

  <body>
   <p> <img src="e:\\project\\images\\newyear.jpg"     name = "ny"/> </p>
              
   <p> <a   href="http:\\google.com"    name = "gog">google.com</a> </p>
              
   <p> <img src="e:\\project\\images\\blueflower.jpg"      name = "bf" /> </p>
              
   <p> <a   href="http:\\facebook.com"      name = "fc"> facebook.com </a> <p>
              
 <script>   function  access(){
                
         var  src   = document.images[0].src ;
                                               
                //the both statement returns the src attribute value of the first image object
         
         var  f_src = document.images["ny"].src ;
                                    
         var  href  = document.links[0].href ;
                                                   
                //the both statement returns the href attribute value of the first link object
          
         var f_href = document.links["gog"].href ;
                                    
                          document.write("the first image src ____"+src+"<br/>");
                                    
                          document.write("the first image src_____"+f_src+"<br/>");
                                    
                          document.write("the first link href_____"+href+"<br/>");
                                    
                          document.write("the first link href_____"+href+"<br/>");                           
         }     </script>
         
 </body>