LearnCodeLive

Node Properties · Astro Tech Blog
Web Development / Frontend / JavaScript DOM / Document

Node Properties

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

The Most Important Properties

PropertyReturnsWorks On
nodeTypeNumber (1=element, 3=text, 8=comment, 9=document)All nodes
nodeNameTag name (uppercase) or #text, #commentAll nodes
tagNameTag name (uppercase)Element nodes only
innerHTMLHTML content as stringElement nodes
outerHTMLElement including its HTML tagElement nodes
textContentAll text, no HTML tagsElement + text nodes
dataThe node’s text valueText + 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:

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