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

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

DOM How-To

Web Scripting Overview

HTML Input

Web Scripting Examples

Web Scripting Misc



Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials