Node properties & contents

The properties dashboard

The DOM tree gives JavaScript objects for everything the browser built: the document, elements, words, comments, and fragments. This lesson is about the small dashboard of properties you read most often once you have a node in your hand.

Some properties identify what kind of node you found: nodeType, nodeName, tagName, and localName. Other properties read or replace the contents: textContent, innerText, innerHTML, and outerHTML. Finally, hidden is a convenient property for toggling the matching HTML attribute.

Start with this tiny replay. It is not a browser debugger; it is a safe model that isolates one question: which string comes back when you read a content property?

1const card = {Run2  textContent: "Hello hidden note",3  innerHTML: "Hello <span hidden>hidden note</span>",4  outerHTML: "<p>Hello <span hidden>hidden note</span></p>",5};6const picked = card.textContent;7console.log(picked);

The broadest test is node.nodeType. It is a number because it comes from older DOM APIs, but the constants are still useful:

For HTML elements in an HTML document, nodeName and tagName are uppercase: a paragraph reports P. localName is usually the lowercase name you typed, such as p. SVG elements are different: in an HTML document an inline SVG circle reports lowercase tagName and localName. Verify it below in your own browser.

1const node = event.target;2console.log(node.nodeType);3console.log(node.nodeName);4console.log(node.tagName);5console.log(node.localName);6console.log(node.nodeValue);

Notice one professional habit: check whether you have an element before using element-only properties. tagName exists on elements; a text node has nodeName #text and stores its words in nodeValue or data instead.

innerHTML is a powerful shortcut: it serializes or parses the children inside an element. Assigning to it is not a tiny edit. The browser throws away the old children and builds new ones from the HTML string. That means old listeners, focus, references, and typed input property values are lost.

1const box = document.querySelector("#box");2box.innerHTML = "<b>bold</b> text";3box.innerHTML += "<em> rebuilt</em>";4const old = box.querySelector("b");5old.outerHTML = "<strong>new</strong>";6console.log(old.isConnected);

outerHTML goes one step farther: it replaces the element itself, not only its children. After old.outerHTML = "...", the page contains the replacement, while old still points at the detached original object. In the browser verified for this lesson, setting outerHTML on document.documentElement throws NoModificationAllowedError because its parent is the document. A detached element assignment did not throw in that browser, but it also did not insert anything because there was no parent to replace it in.

textContent is about node data. It reads the text of all descendant text nodes, including hidden elements and text inside style or script elements. Setting it replaces the children with one text node, so markup-looking characters are shown literally.

innerText is about rendered text. It is CSS-aware: it skips display: none content, applies effects such as text-transform: uppercase, and turns block boundaries or <br> into line breaks. Because it asks layout what a reader sees, it can trigger layout work. If an element is not being rendered, browsers return the same value as textContent.

1const panel = document.querySelector("#panel");2console.log(panel.textContent);3console.log(panel.innerText);

""

""

One odd but useful edge case: document.textContent is null. The document is the root container, not a normal element with text children to concatenate.

Cross-site scripting, usually shortened to XSS, happens when a string from outside your code becomes instructions in your page. A comment, profile name, search term, or chat message should be text. If you put it into innerHTML, you let the string become markup.

1nameSlot.innerHTML = userName; // unsafe for untrusted text2nameSlot.textContent = userName; // safe: shows characters

<img src="data:," onerror="parent.postMessage('ran', '*')">

element.hidden reflects the HTML hidden attribute. Set it to true, and the attribute appears. Set it to false, and the attribute is removed. Browsers usually hide matching elements with a user-agent stylesheet rule like [hidden] { display: none; }.

That last sentence hides a trap: it is CSS, not magic. Author CSS can override the browser’s rule. If your stylesheet says a hidden panel is display: flex, the panel can still be visible unless your app includes a stronger rule such as [hidden] { display: none !important; } or toggles a class whose styles win.

1panel.hidden = !panel.hidden;2// If author CSS says display: flex, the element can still be visible.3// Fix with: [hidden] { display: none !important; }

You may also see hidden="until-found" in newer material. It is meant for content that is hidden until browser find-in-page or fragment navigation reveals it, but not every browser supports it yet. For ordinary toggles, use the boolean hidden property and test your CSS.

Where you will use this

These properties show up in small everyday tasks. A search result title from your server should go into textContent. A trusted icon template might be cloned or inserted with a safe framework mechanism, not assembled from user input. A disclosure panel can use button.ariaExpanded together with panel.hidden so assistive technology and sighted users agree.

function showMessage(slot, message) {
  slot.textContent = message;
}

function toggleDetails(button, panel) {
  const willOpen = panel.hidden;
  panel.hidden = !willOpen;
  button.setAttribute("aria-expanded", String(willOpen));
}

Use the identity properties for defensive code. If a function may receive a text node, a comment, or an element, check node.nodeType before reaching for tagName.

Common misconceptions

• “Every node has tagName.” Text, comment, document, doctype, and fragment nodes do not. Use nodeName or check nodeType first.
• “innerHTML += appends safely.” It is still an assignment to innerHTML, so existing children are rebuilt.
• “Scripts do not run, so innerHTML is safe.” Event-handler attributes and dangerous URLs can still execute behavior. Avoid parsing untrusted strings.
• “innerText and textContent are synonyms.” innerText asks layout for visible text; textContent reads text nodes.
• “hidden always wins.” The default hiding comes from CSS. Stronger author CSS can override it.
• “After outerHTML, my variable points at the new element.” It still points at the old object; query again to get the replacement.

Key takeaways

• nodeType tells you the broad kind: element 1, text 3, comment 8, document 9, doctype 10, fragment 11.
• tagName is element-only; nodeName works on every node and uses names like #text.
• innerHTML and outerHTML parse strings and rebuild nodes. They are for trusted markup, not user text.
• textContent reads raw text node data. innerText reads rendered text and can trigger layout.
• hidden reflects an attribute, but CSS decides whether that attribute actually hides the element.

Final definition: Node content properties are the DOM’s read/write controls for a node’s identity, text, HTML, and hidden state.

Up next: Attributes & properties.