Basic DOM Node Properties

Abhijeet Singh
10y
3.9k
0
1

Article

A DOM node is an object with properties containing information about a node itself and its contents.

Structure and content properties

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

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all