DOM: Node Type, Node Name, Node Value

By Xah Lee. Date: . Last updated: .

Each HTML/XML node has a {type, name, value}. You can find a node's {type, name, value} by the properties { nodeType, nodeName, nodeValue }.

These are the most general way to work with any HTML or XML's node, including nodes such as <!doctype html>.

Use {nodeType, nodeName, nodeValue} only if you are working with arbitrary HTML or XML nodes. (for example, SVG. 〔►see Practical SVG Tutorial〕 )

What's a node?

When working with HTML, typically we work with HTML elements.

When working with XML, it's more common to work with the more general concept of nodes.

What is a node type?

Node type is a integer that indicates the type of the node.

There are unusual kind of nodes. For example:

Typically you want to know node name (aka tag name) and node value (the content of a HTML element.) You should first check if node type is the right type, then you can query node name or value. (else you'll get error or null.)

How to get a node?

see DOM: Get Elements by ID, Tag, Name, Class, CSS Selector

Node Type

node.nodeType → Return node's type.

The return value is a number. Usually 1 or 3. “1” means it's a HTML/XML element. “3” means its content.

Here's a complete list of possible return values.

html element node type
valuemeaning
1ELEMENT_NODE
2ATTRIBUTE_NODE
3TEXT_NODE
4CDATA_SECTION_NODE
5ENTITY_REFERENCE_NODE
6ENTITY_NODE
7PROCESSING_INSTRUCTION_NODE
8COMMENT_NODE
9DOCUMENT_NODE
10DOCUMENT_TYPE_NODE
11DOCUMENT_FRAGMENT_NODE
12NOTATION_NODE
// show the root node “document”'s type, name, value
document.nodeType   // 9
document.nodeName   // "#document"
document.nodeValue  // null
// root element has 2 child
document.childNodes.length // 2

// this is <!doctype html>
document.childNodes[0].nodeType // 10
document.childNodes[0].nodeName // "html"
document.childNodes[0].nodeValue // null

// this is <html>
document.childNodes[1].nodeType // 1
document.childNodes[1].nodeName // "HTML"
document.childNodes[1].nodeValue // null
// example of a element node

// first paragraph element
var xx = document.getElementsByTagName("p")[0];

xx.nodeType // 1
xx.nodeName // "P"
xx.nodeValue // null
// example of a text node

// first paragraph's content
var myNode = document.getElementsByTagName("p")[0].firstChild;

myNode.nodeType // 3
myNode.nodeName // "#text"
myNode.nodeValue // a string of p's content

As of , this works in all major browsers.

Node Name

node.nodeName → Return the node's (tag) name (a string), if the node is a element node (nodeType is 1). If it's a text node, the value is "#text".

〔►see Case Sensitivity in {HTML5, XML, CSS, JavaScript}

You can use str.toLowerCase() to convert it.

// first paragraph
document.getElementsByTagName("p")[0].nodeName // "P"

// first paragraph's content
document.getElementsByTagName("p")[0].childNodes[0].nodeName // "#text"

As of , this works in all major browsers.

Node Value

Use node.nodeValue to get the content of text node. For most other node types, it returns null.

// first paragraph's first child's value
document.getElementsByTagName("p")[0].childNodes[0].nodeValue
// sample return value "thank you "

To change a HTML element's content, you can set nodeValue to some text. See: DOM: Change Element's Content.

For getting element's text content, there are more practical and convenient way by using textcontent or innerHTML property. 〔►see DOM: Difference Between textContent, innerHTML, innerText, nodeValue

As of , this works in all major browsers.

Basic DOM Methods Topic

  1. DOM: Basic DOM Methods
  2. DOM: Get Elements by ID, Tag, Name, Class, CSS Selector
  3. DOM: Get Element's Attribute Value
  4. DOM: Set Element's Attribute Value
  5. DOM: List/Add/Remove Class Attribute
  6. DOM: Node Type, Node Name, Node Value
  7. DOM: Navigate DOM Tree
  8. DOM: Add / Remove Event Handler
Like what you read? Buy JavaScript in Depth