Categories:

JavaScript Kit > DOM Reference > Here

Element nodeType values

Last updated: Februrary 27th, 2006

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

Returned integer Node type Constant
1 ELEMENT_NODE
2 ATTRIBUTE_NODE
3 TEXT_NODE
4 CDATA_SECTION_NODE
5 ENTITY_REFERENCE_NODE
6 ENTITY_NODE
7 PROCESSING_INSTRUCTION_NODE
8 COMMENT_NODE
9 DOCUMENT_NODE
10 DOCUMENT_TYPE_NODE
11 DOCUMENT_FRAGMENT_NODE
12` NOTATION_NODE

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:

Returned string Indicates
#comment This is a comment node.
#document This is the document node.
element.tagName The tagName of the element, indicating this is an element at the same time.
Attri.name The name of the attribute, indicating this is an attribute node at the same time.
#text This is a text node.

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>

Sponsored By

DD CSS Library
Free CSS menus and codes to give your site a visual boost.

DOM Window
DOM Document
DOM Element
DOM Event
DOM Style
DOM Table
Miscellaneous

 

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.