JavaScript

Basic DOM Node Properties

Introduction

 
A DOM node is an object with properties containing information about a node itself and its contents. 
 
Structure and content properties
  1. nodeType
     
    All nodes are typed. There are totally of 12 types of nodes. described in DOM Level 1. 
    1. interface Node {  
    2.   // NodeType  
    3.   const unsigned short      ELEMENT_NODE       = 1;  
    4.   const unsigned short      ATTRIBUTE_NODE     = 2;  
    5.   const unsigned short      TEXT_NODE          = 3;  
    6.   const unsigned short      CDATA_SECTION_NODE = 4;  
    7.   const unsigned short      ENTITY_REFERENCE_NODE = 5;  
    8.   const unsigned short      ENTITY_NODE        = 6;  
    9.   const unsigned short      PROCESSING_INSTRUCTION_NODE = 7;  
    10.   const unsigned short      COMMENT_NODE       = 8;  
    11.   const unsigned short      DOCUMENT_NODE      = 9;  
    12.   const unsigned short      DOCUMENT_TYPE_NODE = 10;  
    13.   const unsigned short      DOCUMENT_FRAGMENT_NODE = 11;  
    14.   const unsigned short      NOTATION_NODE      = 12;  
    15.      
    16.   ...  
    17. } 
    The most important ones are ELEMENT_NODE with number 1 and TEXT_NODE, which has number 3. Other types are rarely used.
     
    For example, to list all nodes skipping non-elements, one can iterate over childNodes and usechildNodes[i].nodeType != 1 check.
    1. <body>  
    2.   <div>Welcome:</div>  
    3.   <ul>  
    4.     <li>Abhijeet</li>  
    5.     <li>Bittoo</li>  
    6.   </ul>  
    7.   <script>     
    8.      var childNodes = document.body.childNodes  
    9.      for(var i=0; i<childNodes.length; i++) {  
    10. if (childNodes[i].nodeType != 1) continue  
    11.        alert(childNodes[i])  
    12.      }  
    13.   </script>  
    14. </body> 
  2. nodeName, tagName:
     
    Both nodeName and tagName contain the name of an element node.
     
    For document.body:
    1. alert( document.body.nodeName )   // BODY 
    In HTML any nodeName is uppercased, no matter which case you use in the document.
     
    For element nodes, nodeName and tagName are the same.
     
    But the nodeName property also exists on non-element nodes.
     
  3. InnerHTML
     
    The innerHTML property allows to access node contents in text form.
    1. <body>  
    2.   <p>My para </p>  
    3.   <div>Hello</div>  
    4.   <script>  
    5.     alert( document.body.innerHTML ) // it reads current contents  
    6.     document.body.innerHTML = 'Yaaahooo!' // it replaces contents  
    7.   </script>  
    8. </body> 
  4. nodeValue 
     
    The innerHTML works only for element nodes. 
     
    For other types of nodes, there is a nodeValue property that contains the contents. 
    1. <body>  
    2.   My text  
    3.     
    4.   <script>  
    5.     for(var i=0; i<document.body.childNodes.length; i++) {  
    6.       alert(document.body.childNodes[i].nodeValue)  
    7.     }  
    8.   </script>  
    9. </body> 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found