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

node.nodeValue
Return 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.

JS in Depth
XAH  BUY NOW

JS in Depth

JS Obj Ref

DOM


DOM

Overview

Basic Examples

HTML Input

Web Scripting Examples

Web Scripting Misc

jQuery

node.js