New:Embedded & IoT Bootcamp
Codenexium.com
Tutorial 5 of 11 in series

Node Properties

Learn about DOM node types, tag names, and content properties

Abhishek Sharma 2026-06-10 Web Development / Frontend / JavaScript DOM / Document
45%

Node Properties

Every DOM node has properties that reveal its type, tag, and content.

The Most Important Properties

Property Returns Works On
nodeType Number (1=element, 3=text, 8=comment, 9=document) All nodes
nodeName Tag name (uppercase) or #text, #comment All nodes
tagName Tag name (uppercase) Element nodes only
innerHTML HTML content as string Element nodes
outerHTML Element including its HTML tag Element nodes
textContent All text, no HTML tags Element + text nodes
data The node’s text value Text + comment nodes
Demo: Exploring Node Properties
HTML 
<div id='props-demo'>
<h2>Hello <em>World</em></h2>
<!-- comment here -->
Just some text
</div>
<pre id='props-output' style='background:#f1f5f9;padding:8px;border-radius:4px;'></pre>
JavaScript 
const demo = document.getElementById('props-demo');
const out = document.getElementById('props-output');

out.textContent =
'div.nodeType: ' + demo.nodeType + ' (1 = element)' + '\\n' +
'div.nodeName: ' + demo.nodeName + '\\n' +
'div.tagName: ' + demo.tagName + '\\n' +
'div.innerHTML: ' + demo.innerHTML + '\\n' +
'div.outerHTML: ' + demo.outerHTML.slice(0, 80) + '...' + '\\n' +
'---' + '\\n' +
'First child (text):' + '\\n' +
'  nodeType: ' + demo.childNodes[0].nodeType + ' (3 = text)' + '\\n' +
'  nodeName: ' + demo.childNodes[0].nodeName + '\\n' +
'  data: ' + JSON.stringify(demo.childNodes[0].data.trim()) + '\\n' +
'---' + '\\n' +
'Comment child (nodeType 8):' + '\\n' +
'  nodeName: ' + demo.childNodes[2].nodeName + '\\n' +
'  data: ' + demo.childNodes[2].data;
Live Output Window

innerHTML vs textContent

This difference is crucial for security:

element.innerHTML = '<strong>bold</strong>'  // renders bold text
element.textContent = '<strong>bold</strong>' // shows literal text
Demo: innerHTML vs textContent
HTML 
<div id='danger'></div>
<div id='safe'></div>
JavaScript 
document.getElementById('danger').innerHTML = '<span style= 'color:#dc2626;'>Rendered as HTML</span>';
document.getElementById('safe').textContent = '<span>Shown as text only</span>';
Live Output Window

Security rule: Use textContent when inserting user input to prevent XSS attacks. Only use innerHTML with trusted content.

hidden Property

Every element has a hidden boolean property. Set it to true to hide the element:

Demo: The hidden property
HTML 
<p id='toggle-demo'>This text can be hidden</p>
<button id='hide-btn'>Toggle Hidden</button>
JavaScript 
const p = document.getElementById('toggle-demo');
const btn = document.getElementById('hide-btn');

btn.addEventListener('click', function() {
p.hidden = !p.hidden;
btn.textContent = p.hidden ? 'Show' : 'Hide';
});
Live Output Window

value and checked

Form elements have specific value properties:

Element Property
<input>, <textarea> value
<select> value
<input type="checkbox"> checked
<input type="radio"> checked
Demo: Form element properties
HTML 
<input id='name-input' type='text' placeholder='Type something' value='Hello'>
<input id='agree-input' type='checkbox' checked>
<label for='agree-input'>Agreed</label>
<br>
<pre id='form-props' style='background:#f1f5f9;padding:8px;border-radius:4px;'></pre>
JavaScript 
const inp = document.getElementById('name-input');
const chk = document.getElementById('agree-input');
const out = document.getElementById('form-props');

function update() {
out.textContent =
'input.value: ' + inp.value + '\\n' +
'checkbox.checked: ' + chk.checked;
}
inp.addEventListener('input', update);
chk.addEventListener('change', update);
update();
Live Output Window

NodeType Constants

For readability, use the constants:

element.nodeType === Node.ELEMENT_NODE     // 1
element.nodeType === Node.TEXT_NODE        // 3
element.nodeType === Node.COMMENT_NODE     // 8
element.nodeType === Node.DOCUMENT_NODE    // 9

Key Takeaways

  • nodeType tells you what kind of node you’re dealing with
  • Use textContent for safe text insertion
  • Use innerHTML only with trusted content
  • hidden is a simple built-in way to show/hide elements
  • Form elements have special value properties (value, checked)

Keep learning

Related tutorials from across the library.

All tutorials
Tutorial2026-06-10

Browser Environment & Specs

Understand the JavaScript browser environment - window, DOM, BOM, and ECMAScript

Web Development / Frontend / JavaScript DOM / Document

JavaScriptDOM
Tutorial2026-06-10

DOM Tree

Understand the DOM tree - how browsers represent HTML as a document tree

Web Development / Frontend / JavaScript DOM / Document

JavaScriptDOM
Tutorial2026-06-10

Walking the DOM

Navigate the DOM tree using parent, child, and sibling properties

Web Development / Frontend / JavaScript DOM / Document

JavaScriptDOM