Tipo DocumentType

O nó DocumentType representa a declaração do tipo de documento (DOCTYPE). No DOM, esse nó possui o valor de nodeType igual a 10. A declaração DOCTYPE instrui o navegador sobre a versão e as regras sintáticas do documento, ajudando a determinar o modo de renderização.

Propriedades Principais

• name: Retorna o nome do tipo de documento. Em um documento HTML5, esse valor é sempre "html".
• publicId: O identificador público associado à definição do tipo de documento. Para HTML5, retorna uma string vazia "".
• systemId: O identificador do sistema, normalmente apontando para um URL de DTD. Para HTML5, também é uma string vazia.

Características e Aceso

As propriedades de um nó DocumentType são somente leitura. Geralmente, ele é acessado através da propriedade document.doctype e é o primeiro filho do objeto document.

Exemplos de Uso

// Obter o nó DOCTYPE atual
const currentDoctype = document.doctype;
console.log(currentDoctype.name); // "html"

// Criar um novo nó DocumentType (para documentos dinâmicos)
const customDoctype = document.implementation.createDocumentType(
  'math',
  '',
  ''
);

// Substituir o DOCTYPE existente (operação rara)
document.replaceChild(customDoctype, document.doctype);

Tipo DocumentFragment

DocumentFragment (nodeType 11) é um contêiner leve e temporário para nós do DOM. Ele não pertence diretamente à árvore do documento e serve principalmetne para agrupar operações de manipulação do DOM, minimizando o impacto no desempenho.

Propósito e Vantagens

Adicionar múltiplos nós diretamente ao DOM uma vez cada pode causar múltiplas vezes o recálculo do layout (reflow). O DocumentFragment permite que você agrupe todas as adições e insira o conteúdo final de uma só vez, reduzindo drasticamente esse custo.

Métodos e Uso Típico

Criação: document.createDocumentFragment()

O fragmento suporta os mesmos métodos de manipulação de filhos que outros nós, como appendChild e prepend. Quando o fragmento é adicionado ao DOM, seus filhos são movidos para o destino, e o fragmento se torna vazio.

Comparação de Desempenho

// Abordagem ineficiente: múltiplas inserções diretas
function renderInefficient(list) {
  list.forEach(item => {
    const element = document.createElement('li');
    element.textContent = item;
    document.body.appendChild(element);
  });
}

// Abordagem otimizada com DocumentFragment
function renderOptimized(list) {
  const tempFragment = document.createDocumentFragment();
  list.forEach(item => {
    const element = document.createElement('li');
    element.textContent = item;
    tempFragment.appendChild(element);
  });
  document.body.appendChild(tempFragment); // Uma única operação de layout
}

Tipo Attr

O tipo Attr (nodeType 2) representa um atributo de um elemento. Embora tecnicamente seja um nó no DOM, na prática moderna, os atributos são mais frequentemente acessados e modificados através de métodos de nível superior como setAttribute e getAttribute em vez de manipular diretamente os nós Attr.

Atributos e Relação com Elementos

• name: O nome do atributo (ex: "id", "class").
• value: O valor atual do atributo. É legível e gravável.
• specified: Um booleano que indica se o atributo foi definido explicitamente no documento (vs. um valor padrão do elemento).

Os nós Attr não são filhos do elemento (element.childNodes não os inclui). Em vez disso, a coleção element.attributes (um NamedNodeMap) fornece acesso a eles.

Manipulação Programática

const anchor = document.querySelector('a');
// Obter um nó Attr específico
const hrefNode = anchor.getAttributeNode('href');
console.log(hrefNode.value);

// Criar e adicionar um novo atributo
const newAttr = document.createAttribute('data-mode');
newAttr.value = 'advanced';
anchor.setAttributeNode(newAttr);

// Remover um atributo usando seu nó
anchor.removeAttributeNode(hrefNode);

Compreender esses tipos de nós oferece uma visão mais profunda da arquitetura do DOM, embora as APIs de mais alto nível geralmente abstraem sua manipulação direta no desenvolvimento cotidiano.