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

Web Scripting Overview

  1. Browser Window Object, DOM
  2. Intro to Event-Based Programing
  3. JavaScript Load Order

DOM How-To

  1. Basic DOM Methods
  2. Get Element by ID, Tag, Name, Class, CSS
  3. Change CSS
  4. Change Node Content
  5. Create/Insert Node
  6. Remove Node
  7. Get Attribute Value
  8. Set Attribute Value
  9. Remove Attribute
  10. List/Add/Remove Class Attribute
  11. Add/Remove Event Handler
  12. Navigate DOM Tree
  13. Node Type, Name, Value

HTML Input

  1. Button
  2. Text Field
  3. Password Field
  4. Textarea
  5. Email 📧
  6. Number Field
  7. Radio Button 🔘
  8. Checkbox 🗹
  9. Popup Menu
  10. Slider 🎚
  11. Color Picker 🌈

Web Scripting Examples

  1. Disable Right Click
  2. document.write
  3. Image Rollover
  4. Pop-up New Window
  5. Digital Clock
  6. Stopwatch
  7. Fade a Element
  8. How to Create Tooltip
  9. Falling Snow Effect
  10. Box Following Scroll

Web Scripting Misc

  1. Web Cookies
  2. Web Storage
  3. DOM: Open URL window.open
  4. Encode URL, Escape String
  5. Browser Info, Navigator Object
  6. Get URL (window.location)
  7. Find Window Width
  8. Find Element Width
  9. WebSocket
  10. Value of “this” in Event Handler
  11. Event Delegation
  12. Get Current Script Tag
  13. insertAfter Element
  14. Randomize List
  15. create Document Fragment
  16. innerHTML, nodeValue, textContent, innerText?
  17. What is Live Object
  18. NodeList vs HTMLCollection
  19. Whitespace Nodes

jQuery

  1. jQuery Basics
  2. jQuery() vs querySelectorAll()
  3. Write JQuery Plugin

node.js

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

  1. HTML
  2. CSS
  3. JavaScript
  4. JS Obj Ref
  5. DOM
  6. SVG
  7. Blog