Node properties & contents

Questions you can ask a node

The browser reads your HTML and builds a tree of objects called the DOM. Each object in the tree is a node. Some nodes are elements, like a heading or a paragraph. Some are text, the words between tags. Some are comments.

Once you have found a node, you can ask it questions through its properties. A property is a named value on an object, like node.nodeType. This lesson covers three groups:

• What kind of node is this? nodeType, nodeName, tagName, and localName.
• What is inside it? textContent, innerText, innerHTML, and outerHTML. You can read these, and you can also set them to replace what is inside.
• Should it be hidden? hidden.

Start with a small step-through. The code uses a plain object, card, that holds three strings. Each string is what one real content property would give back for the same paragraph. Pick a property, then step through to see which string comes out.

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 first question is "what kind of node is this?". node.nodeType answers with a number. Each kind of node has its own number. The table shows the common kinds.

Read each row as one kind of node. The columns show what each property gives back for that kind.

An element has three name properties. Here they are on one heading.

const title = document.querySelector("h2");
console.log(title.nodeType);
console.log(title.nodeName, title.tagName, title.localName);

1. Line 1 finds the first h2 heading on the page.
2. Line 2 prints 1, the number for an element.
3. Line 3 prints H2 H2 h2. nodeName and tagName use capital letters. localName uses small letters, the way you usually type the tag.

That rule is for HTML elements in an HTML page. SVG elements are different. SVG is the drawing language for shapes inside a page. An SVG circle gives circle in small letters for both tagName and localName. You can check this in the inspector below.

Every element also belongs to a chain of browser classes. A class is a blueprint that says which properties and methods an object gets. For an input box, the chain is:

1. EventTarget: it can listen for events, like clicks.
2. Node: it has node properties, like nodeType.
3. Element: it has element properties, like tagName.
4. HTMLElement: it has properties every HTML element shares, like hidden.
5. HTMLInputElement: it has input properties, like value.

Each class adds to the one before it. So one input is all five at once.

const input = document.querySelector("#lesson-input");
console.log(input instanceof EventTarget);
console.log(input instanceof Node);
console.log(input instanceof Element);
console.log(input instanceof HTMLElement);
console.log(input instanceof HTMLInputElement);

Line 1 finds the input. instanceof asks "was this object made from this class, or from a class built on it?". Lines 2 to 6 ask that for each class in the chain. Every line prints true. This example needs a browser. Node.js does not have these DOM classes on its own.

Text and comment nodes are not elements. They keep their characters in a different place.

const text = document.createTextNode("tea");
const comment = document.createComment("later");
console.log(text.nodeValue, text.data);
console.log(comment.nodeName, comment.data);

1. Line 1 makes a text node that holds tea.
2. Line 2 makes a comment node that holds later.
3. Line 3 prints tea tea. nodeValue and data both hold the text.
4. Line 4 prints #comment later: the comment's nodeName, then its data.

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

A good habit: check that you have an element before you read an element-only property. tagName exists only on elements. A text node has the nodeName #text, and keeps its words in nodeValue or data.

innerHTML holds the HTML inside an element, written as a string. HTML written as text like this is called markup.

• When you read innerHTML, the browser writes the element's children out as a markup string.
• When you set innerHTML, the browser parses your string. To parse means to read the markup and build real nodes from it.

Setting innerHTML is not a small edit. The browser throws away all the old children and builds new ones from your string. Everything attached to the old children is lost:

• Listeners: functions that run when you click or type.
• Focus: which box the cursor was in.
• Variables in your code that pointed at the old children.
• Text a person typed into an input.

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 further. It holds the element itself plus its children. Setting it replaces the whole element, not only what is inside.

const old = document.querySelector("#outer-old");
old.outerHTML = "<p id='outer-new'>New text</p>";
console.log(old.isConnected);
console.log(document.querySelector("#outer-new").textContent);

1. Line 1 finds the old element and keeps it in old.
2. Line 2 replaces that element on the page with a new paragraph.
3. Line 3 prints false. isConnected says whether a node is still on the page. old still points at the removed element.
4. Line 4 finds the new paragraph and prints New text.

So after setting outerHTML, search the page again to get the new element. A node that is no longer on the page is called detached.

Two edge cases, checked in a real browser for this lesson:

• Setting outerHTML on document.documentElement (the html element) throws a NoModificationAllowedError. Its parent is the document itself, which cannot take a replacement.
• Setting outerHTML on an element that is not on the page does not throw. It also does nothing, because there is no parent to put the replacement in.

textContent reads the words stored in the nodes. It joins the text of every text node inside the element, in order:

• It includes text in hidden elements.
• It includes the text inside style and script elements.
• Setting it replaces all the children with one text node. Characters like <b> are shown as they are. They do not become tags.

innerText reads the words a person sees on screen. It follows the CSS:

• It skips anything with display: none.
• It applies CSS changes such as text-transform: uppercase.
• It puts line breaks between blocks, like paragraphs, and for each <br>.

To know what is shown, innerText asks the browser to work out the page layout: where every box sits on screen. That can take extra work. If the element is not shown at all, innerText gives the same value as textContent.

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

""

""

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

1. Line 1 finds the panel. It holds Hello, a hidden hidden note, and a paragraph, soft words.
2. Line 2 prints Hello hidden notesoft words. The hidden note is included.
3. Line 3 prints Hello, a blank line, then soft words. The hidden note is left out.

Use innerText only when you need to know what is shown. For everything else, use textContent.

Read each row as one property. The columns say what it does when you read it, when you set it, and when to use it.

One odd case: document.textContent is null. The document is the root of the whole tree, not an element, so it does not join up text the way an element does.

Some text comes from outside your code: a comment, a profile name, a search word, or a chat message. This is called untrusted text, because anyone could have typed it.

Cross-site scripting, or XSS, is an attack. Someone types markup that holds code. If your page puts that text into innerHTML, the browser builds real elements from it, and the code can run in your page.

1nameSlot.innerHTML = userName; // unsafe for text from users2nameSlot.textContent = userName; // safe: shows the characters

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

HTML has a hidden attribute. An attribute is a setting written in the tag, like <div hidden>. The element.hidden property is linked to that attribute:

• Set hidden to true, and the attribute is added to the tag.
• Set it to false, and the attribute is removed.

The hiding itself comes from CSS. Every browser has its own built-in stylesheet. It has a rule like [hidden] { display: none; }, which hides every element with the attribute.

Your own CSS can beat that built-in rule. Say your stylesheet gives a panel display: flex. Then the panel stays visible, even with hidden on. To fix it, add a stronger rule, such as [hidden] { display: none !important; }, or switch a class instead.

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

const panel = document.querySelector("#hidden-panel");
panel.hidden = true;
console.log(panel.hasAttribute("hidden"), panel.hidden);
panel.hidden = false;
console.log(panel.hasAttribute("hidden"), panel.hidden);

1. Line 1 finds the panel.
2. Line 2 sets hidden to true.
3. Line 3 prints true true: the attribute is there, and the property is on.
4. Line 4 sets hidden to false.
5. Line 5 prints false false: the attribute is gone, and the property is off.

You may also see hidden="until-found". It hides content until the browser's find-in-page search, or a link to that spot, shows it. Not every browser supports it yet. For a normal show-and-hide switch, use hidden as true or false, and test your CSS.

Where you will use this

These properties show up in small, everyday jobs:

• A search result title from your server goes into textContent.
• Markup for an icon comes from your own code, never from user text.
• A "show details" button can set panel.hidden and the button's aria-expanded attribute together. aria-expanded tells screen readers whether the panel is open, so every user hears the same thing they see.

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

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

• Line 2 shows the message as text, so any tags in it stay as plain characters.
• Line 6 notes whether the panel is hidden now. If it is, the click will open it.
• Line 7 flips hidden.
• Line 8 sets aria-expanded to "true" or "false" to match.

const message = document.querySelector("#message");
message.textContent = "<b>Tea is ready</b>";
console.log(message.textContent);
console.log(message.firstChild.nodeType);

1. Line 1 finds the message box.
2. Line 2 sets its textContent to a string that looks like a tag.
3. Line 3 prints the string as it is: <b>Tea is ready</b>.
4. Line 4 prints 3. The box has one child, and it is a text node, not a real b element.

Use the "what kind of node" properties to write careful code. If a function might get a text node, a comment, or an element, check node.nodeType before you read tagName.

Common misconceptions

• "Every node has tagName." Only elements have it. Text, comment, document, doctype, and fragment nodes don't. Use nodeName, or check nodeType first.
• "innerHTML += just adds to the end." It still sets innerHTML. The browser reads the old markup, adds your string, and rebuilds every child.
• "Script tags don't run, so innerHTML is safe." Attributes like onerror can still run code. Never put untrusted text into innerHTML.
• "innerText and textContent are the same." innerText gives only the text shown on screen. textContent gives the text of every text node.
• "hidden always hides." The hiding comes from a CSS rule. A stronger rule in your own CSS can beat it.
• "After outerHTML, my variable points at the new element." It still points at the old, removed element. Search the page again to get the new one.

Key takeaways

• nodeType tells you the kind of node: element 1, text 3, comment 8, document 9, doctype 10, fragment 11.
• tagName exists only on elements. nodeName works on every node and gives names like #text.
• innerHTML and outerHTML parse a string and build new nodes. Use them only for markup you wrote, never for user text.
• textContent gives the text of every text node. innerText gives only the text shown, and makes the browser work out the layout.
• hidden adds or removes an attribute. CSS decides whether that attribute really hides the element.

Final definition: Node properties let you read and change what kind of node you have, the text and HTML inside it, and whether it is hidden.

Up next: Attributes & properties.