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

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 is a complete list of possible return values.

html element node type
// 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
let xx = document.getElementsByTagName("p")[0];

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

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

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

As of , this works in all major browsers.

Node Name

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 HTML/CSS Case Sensitivity]

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

Return the content of text node. For most other node types, it returns null.
// first paragraph's first child's value
// 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.

JavaScript in Depth

DOM Scripting Tutorial


Basic Examples

HTML Input

Web Scripting Examples

Web Scripting Misc