JavaScript Kit > DOM Reference > Here

Element nodeType values

The term "nodes" is just a fancy way of referring to all the elements in a document, whether it's a particular DIV, or the text contained inside it. The "nodeType" property of the DOM is very helpful in determining exactly the type of the node you're currently accessing, which isn't always so apparent. Here are the possible values returned by "nodeType":

nodeType values chart

Consider the following HTML code:

<div id="adiv"><b>Some text</b></div>

<script type="text/javascript">
alert(document.getElementById("adiv").nodeType) //DIV element. Alerts 1
alert(document.getElementById("adiv").firstChild.nodeType) //B element. Alerts 1
</script>

With the above HTML block, you don't really need the "nodeType" property  to tell you the types of the three nodes you're accessing. But consider this slightly modified example:

<div id="adiv"> <b>Some text</b></div>

<script type="text/javascript">
alert(document.getElementById("adiv").nodeType) //DIV element. Alerts 1
alert(document.getElementById("adiv").firstChild.nodeType) //Alerts 1 or 3, depending on browser.
</script>

Here I've added a blank space in front of the B element. To some browsers such as Firefox, a blank space is considered a text node (nodeType=3) just like regular text, while in others such as IE, they are not. Due to this, "the next node" after the DIV element varies depending on which browser you ask, with Firefox saying it's a text node, while IE says it's an element node (B element). Without the help of the nodeType property when traversing the document, your script may very well lose its place.

nodeName property

If the integer value returned by the "nodeType" property is too abstract for you, a more human, albeit less robust way, of returning the type of a node is using the "nodeName" property. It returns a string indicating the name of the node. Returned value is in uppercase. Here are some common "nodeName" property values returned:

For example:

if (document.getElementById("test").firstChild.nodeName=="DIV")
alert("This is a DIV")

nodeValue property

The "nodeValue" property is a read/write property that reflects the current value of a node. For text nodes, the content of the node is returned, while for attribute nodes, the attribute value. Null is returned for Document and element nodes. Use this property to alter the contents of a text or attribute node.

<div id="test">Old text</div>

<script type="text/javascript">
if (document.getElementById("test").firstChild.nodeName=="#text")
document.getElementById("test").firstChild.nodeValue="New text"

</script>