Propriedades de Nós: Tipo, Tag e Conteúdo

Cada nó na árvore DOM é um objeto JavaScript, e esse objeto expõe propriedades que informam que tipo de nó é, qual tag representa e qual conteúdo contém. Quando você consegue ler essas propriedades com confiança, navegar e editar uma página se torna muito menos propenso a erros. Este capítulo aborda a hierarquia de classes de nós, as propriedades de tipo e nome (nodeType, nodeName, tagName) e as quatro propriedades de conteúdo que você usará diariamente (textContent, innerHTML, outerHTML e nodeValue/data) — incluindo quando cada uma é segura de utilizar.

Se você ainda não viu como o DOM é estruturado como uma árvore, leia primeiro Entendendo os Nós do DOM.

A hierarquia de classes de nós

Os objetos DOM não compartilham todos o mesmo conjunto de propriedades. Eles são organizados em uma hierarquia de classes, onde cada classe adiciona capacidades à anterior:

• Node — a classe base. Todo nó (elemento, texto, comentário, documento) herda dela. Ela fornece propriedades genéricas como nodeType, nodeName, nodeValue, parentNode e childNodes.
• Element — um nó que é uma tag. Adiciona tagName, innerHTML, atributos, children e métodos de consulta.
• HTMLElement — a base para todo elemento HTML concreto. Subclasses como HTMLInputElement, HTMLAnchorElement e HTMLTableElement adicionam propriedades específicas de tag (por exemplo, input.value, a.href).
• Text e Comment — nós folha que armazenam texto. Herdam de CharacterData, que adiciona a propriedade data.

Conhecer essa hierarquia explica por que um <div> tem innerHTML mas um nó de texto não: innerHTML está em Element, e um nó de texto não é um elemento. Você pode confirmar a classe de um objeto com Object.prototype.toString ou o nome do construtor:

const div = document.createElement('div');
console.log(div.constructor.name);          // "HTMLDivElement"
console.log(div instanceof HTMLElement);    // true
console.log(div instanceof Element);        // true
console.log(div instanceof Node);           // true

Tipos e nomes de nós

Tipos de nós (nodeType)

A propriedade nodeType é um inteiro que identifica a categoria de um nó. É somente leitura e é a forma mais confiável de ramificar sua lógica ao percorrer o DOM, pois nós de texto e de comentário são fáceis de confundir com elementos. Os valores mais comuns são:

• 1 — Nó de elemento (Node.ELEMENT_NODE): uma tag HTML ou XML como <div> ou <p>.
• 2 — Nó de atributo (Node.ATTRIBUTE_NODE): legado; o código moderno lê atributos com getAttribute()/setAttribute() em vez de percorrer nós de atributo.
• 3 — Nó de texto (Node.TEXT_NODE): o texto entre as tags, incluindo espaços em branco e quebras de linha.
• 8 — Nó de comentário (Node.COMMENT_NODE): um comentário HTML <!-- ... -->.
• 9 — Nó de documento (Node.DOCUMENT_NODE): o próprio objeto document, a raiz da árvore.

Prefira as constantes nomeadas em vez dos números brutos — são mais legíveis e nunca mudam:

const div = document.createElement('div');
div.textContent = 'Hello';

console.log(div.nodeType);                          // 1
console.log(div.nodeType === Node.ELEMENT_NODE);    // true

const textNode = div.firstChild;
console.log(textNode.nodeType === Node.TEXT_NODE);  // true

<!-- snippet: html-result -->

<div id="example">Example node</div>
<script>
    const node = document.getElementById("example");
    node.innerHTML = 'Node type is: ' + node.nodeType;
</script>

Nomes de nós: nodeName vs tagName

Ambas as propriedades retornam o nome de um nó, mas diferem em escopo:

• nodeName existe em qualquer nó. Para um elemento, retorna o nome da tag; para um nó de texto, retorna "#text"; para um comentário, "#comment"; para o documento, "#document".
• tagName existe apenas em elementos. Em um nó que não é elemento, é undefined.

Para documentos HTML, ambas retornam o nome da tag em maiúsculas ("DIV", não "div"), independentemente de como você escreveu a tag:

const div = document.createElement('div');
console.log(div.nodeName);             // "DIV"
console.log(div.tagName);              // "DIV"

const textNode = document.createTextNode('hi');
console.log(textNode.nodeName);        // "#text"
console.log(textNode.tagName);         // undefined

Regra prática: use tagName quando você já sabe que está lidando com um elemento; use nodeName quando pode estar inspecionando qualquer tipo de nó.

<!-- snippet: html-result -->

<div id="example"></div>
<script>
    const element = document.getElementById('example');
    element.innerHTML = 'nodeName: ' + element.nodeName;
</script>

Conteúdo dos nós

Existem quatro propriedades para ler e escrever o que está "dentro" de um nó. Escolher a correta é importante para correção, desempenho e segurança.

textContent — texto simples, seguro

textContent obtém ou define o texto de um nó e todos os seus descendentes, ignorando qualquer marcação. Quando você o lê, obtém o texto concatenado com as tags removidas. Quando você o escreve, a string é inserida como texto literal — qualquer < ou > é escapado, tornando-o a escolha segura para exibir dados não confiáveis:

const div = document.createElement('div');
div.innerHTML = '<b>Hi</b> there';

console.log(div.textContent);          // "Hi there"  (tags stripped)

div.textContent = '<script>alert(1)<\/script>';
console.log(div.textContent);          // "<script>alert(1)</script>"  (inert text, not executed)

<!-- snippet: html-result -->

<div id="example"></div>
<script>
  const element = document.getElementById('example');
  element.textContent = 'Updated text content';
</script>

innerHTML — marcação dentro do elemento

innerHTML obtém ou define o HTML entre as tags de abertura e fechamento de um elemento. Ao defini-lo, a string é analisada como HTML e reconstrói os filhos:

const div = document.createElement('div');
div.innerHTML = '<p>Para <span>one</span></p>';

console.log(div.innerHTML);            // "<p>Para <span>one</span></p>"
console.log(div.children.length);      // 1  (the <p>)

Aviso de segurança: nunca atribua entradas não confiáveis ao innerHTML. Como o navegador as analisa como HTML, uma string como <img src=x onerror=alert(1)> se torna um elemento real que executa scripts — uma falha clássica de cross-site-scripting (XSS). Use textContent para dados fornecidos pelo usuário, ou sanitize antes de inserir.

outerHTML — o elemento incluindo sua própria tag

outerHTML é como innerHTML, mas inclui as próprias tags de abertura e fechamento do elemento. Escrever nele substitui o próprio elemento no DOM, o que tem uma consequência surpreendente — sua variável ainda aponta para o nó antigo, agora desconectado:

const div = document.createElement('div');
div.id = 'box';
div.innerHTML = 'content';

console.log(div.outerHTML);            // '<div id="box">content</div>'

// Setting outerHTML replaces the node; `div` is now stale.

nodeValue / data — texto dentro de nós de texto e de comentário

Para nós de texto e de comentário (que não têm innerHTML), use nodeValue ou seu equivalente data para ler e escrever seu conteúdo:

const text = document.createTextNode('original');
console.log(text.nodeValue);           // "original"
console.log(text.data);                // "original"

text.data = 'changed';
console.log(text.nodeValue);           // "changed"

// On an element node, nodeValue is null.
const div = document.createElement('div');
console.log(div.nodeValue);            // null

Qual devo usar?

Para mais informações sobre inserção e substituição de conteúdo, consulte Modificando o Documento.

Conclusão

Ler as propriedades dos nós é a base de uma manipulação confiável do DOM com JavaScript. Use nodeType (com as constantes Node.*) para distinguir categorias de nós, tagName/nodeName para identificar tags, e escolha uma propriedade de conteúdo deliberadamente: textContent para texto simples e seguro, innerHTML/outerHTML quando você intencionalmente deseja analisar marcação, e nodeValue/data para nós de texto e de comentário puros. Opte por textContent para qualquer coisa que o usuário tenha digitado.

Prática