Modelo de objeto de documento em JavaScript

Resumo : neste tutorial, você aprenderá sobre o Document Object Model em JavaScript.

O que é modelo de objeto de documento (DOM)

O Document Object Model (DOM) é uma interface de programação de aplicativos (API) para manipulação de documentos HTML.

O DOM representa um documento HTML como uma árvore de nós. O DOM fornece funções que permitem adicionar, remover e modificar partes do documento de forma eficaz.

Observe que o DOM é uma forma multiplataforma e independente de linguagem de manipular documentos HTML e XML.

Um documento como uma hierarquia de nós

O DOM representa um documento HTML como uma hierarquia de nós. Considere o seguinte documento HTML:

<html>
    <head>
        <title>JavaScript DOM</title>
    </head>
    <body>
        <p>Hello DOM!</p>
    </body>
</html>Linguagem de código:  HTML, XML  ( xml )

A árvore a seguir representa o documento HTML acima:

Nesta árvore DOM, o documento é o nó raiz. O nó raiz possui um nó filho que é o <html>elemento. O <html> elemento é chamado de elemento do documento .

Cada documento pode ter apenas um documentelemento. Em um documento HTML, o documentelemento é o <html>elemento. Cada marcação pode ser representada por um nó na árvore.

Tipos de nós

Cada nó na árvore DOM é identificado por um tipo de nó. JavaScript usa números inteiros para determinar os tipos de nós. A tabela a seguir ilustra as constantes de tipo de nó:

Constante	Valor	Descrição
`Node.ELEMENT_NODE`	`1`	Um `Element`nó como `<p>`ou `<div>`.
`Node.TEXT_NODE`	`3`	O real `Text`dentro de um `Element`ou `Attr`.
`Node.CDATA_SECTION_NODE`	`4`	Um `CDATASection`, como `<!CDATA[[ … ]]>`.
`Node.PROCESSING_INSTRUCTION_NODE`	`7`	A `ProcessingInstruction`de um documento XML, como `<?xml-stylesheet … ?>`.
`Node.COMMENT_NODE`	`8`	Um `Comment`nó, como `<!-- … -->`.
`Node.DOCUMENT_NODE`	`9`	Um `Document`nó.
`Node.DOCUMENT_TYPE_NODE`	`10`	Um `DocumentType`nó, como `<!DOCTYPE html>`.
`Node.DOCUMENT_FRAGMENT_NODE`	`11`	Um `DocumentFragment`nó.

Para obter o tipo de nó, você usa a nodeTypepropriedade:

node.nodeTypeLinguagem de código:  CSS  ( css )

Você pode comparar a nodeTypepropriedade com as constantes acima para determinar o tipo de nó. Por exemplo:

if (node.nodeType == Node.ELEMENT_NODE) {
    // node is the element node
}Linguagem de código:  JavaScript  ( javascript )

As propriedades `nodeName`e`nodeValue`

Um nó possui duas propriedades importantes: nodeNamee nodeValueque fornecem informações específicas sobre o nó.

Os valores dessas propriedades dependem do tipo de nó. Por exemplo, se o tipo de nó for o nó do elemento, the nodeNameserá sempre igual ao nome da tag do elemento e nodeValueserá sempre null.

Por esse motivo, é melhor testar o tipo de nó antes de usar estas propriedades:

if (node.nodeType == Node.ELEMENT_NODE) {
    let name = node.nodeName; // tag name like <p>
}Linguagem de código:  JavaScript  ( javascript )

Nó e Elemento

Às vezes é fácil confundir entre o Nodee o Element.

Um nó é um nome genérico de qualquer objeto na árvore DOM. Pode ser qualquer elemento DOM integrado, como o documento. Ou pode ser qualquer tag HTML especificada no documento HTML, como <div>ou <p>.

Um elemento é um nó com um tipo de nó específico Node.ELEMENT_NODE, que é igual a 1.

Em outras palavras, o nó é o tipo genérico de elemento. O elemento é um tipo específico do nó com o tipo de nó Node.ELEMENT_NODE.

A imagem a seguir ilustra a relação entre os tipos Nodee Element:

Modelo de objeto de documento em JavaScript

Observe que getElementById()and querySelector()retorna um objeto com o Elementtipo while getElementsByTagName()ou querySelectorAll()retorna NodeListque é uma coleção de nós.

Relacionamentos de nós

Qualquer nó possui relacionamentos com outros nós na árvore DOM. Os relacionamentos são os mesmos descritos em uma árvore genealógica tradicional.

Por exemplo, <body>é um nó filho do <html>nó e <html>é o pai do <body>nó.

O <body>nó é irmão do <head>nó porque eles compartilham o mesmo pai imediato, que é o <html>elemento.

A imagem a seguir ilustra os relacionamentos entre os nós:

Resumo

Um documento HTML ou XML pode ser representado como uma árvore de nós, como uma árvore genealógica tradicional.
Cada marcação pode ser representada como um nó com um tipo de nó específico.
Elemento é um tipo específico de nó com o tipo de nó Node.ELEMENT_NODE.
Na árvore DOM, um nó possui relacionamentos com outros nós.

DOM JavaScript

JavaScriptgetElementById