Basic DOM Node Properties

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 12 types of nodes. described in DOM Level 1.

    interface Node {

      // NodeType

      const unsigned short      ELEMENT_NODE       = 1;

      const unsigned short      ATTRIBUTE_NODE     = 2;

      const unsigned short      TEXT_NODE          = 3;

      const unsigned short      CDATA_SECTION_NODE = 4;

      const unsigned short      ENTITY_REFERENCE_NODE = 5;

      const unsigned short      ENTITY_NODE        = 6;

      const unsigned short      PROCESSING_INSTRUCTION_NODE = 7;

      const unsigned short      COMMENT_NODE       = 8;

      const unsigned short      DOCUMENT_NODE      = 9;

      const unsigned short      DOCUMENT_TYPE_NODE = 10;

      const unsigned short      DOCUMENT_FRAGMENT_NODE = 11;

      const unsigned short      NOTATION_NODE      = 12;

       

      ...

    }


    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.

    <body>

      <div>Welcome:</div>

      <ul>

        <li>Abhijeet</li>

        <li>Bittoo</li>

      </ul>

      <script>   

         var childNodes = document.body.childNodes

         for(var i=0; i<childNodes.length; i++) {

    if (childNodes[i].nodeType != 1) continue

           alert(childNodes[i])

         }

      </script>

    </body>

     
  2. nodeName, tagName:

    Both nodeName and tagName contain the name of an element node.

    For document.body:

    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.

    <body>

      <p>My para </p>

      <div>Hello</div>

      <script>

        alert( document.body.innerHTML ) // it reads current contents

        document.body.innerHTML = 'Yaaahooo!' // it replaces contents

      </script>

    </body>

     
  4. nodeValue

    The innerHTML works only for element nodes.

    For other types of nodes, there is a nodeValue property that contains the contents.

    <body>

      My text

      

      <script>

        for(var i=0; i<document.body.childNodes.length; i++) {

          alert(document.body.childNodes[i].nodeValue)

        }

      </script>

    </body>

Up Next
    Ebook Download
    View all
    Learn
    View all