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

  1. Basic DOM Methods
  2. Get Elements by ID, Tag, Name, Class, CSS Selector
  3. Change CSS
  4. Change Node Content
  5. Create/Insert Node
  6. Remove Node
  7. Get Element's Attribute Value
  8. Set Element's Attribute Value
  9. Remove Element's Attribute Value
  10. List/Add/Remove Class Attribute
  11. Add/Remove Event Handler
  12. Navigate DOM Tree
  13. Node Type, Name, Value
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell 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

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Reference
  5. DOM Scripting
  6. SVG
  7. Blog