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;
    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
    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>