Introdução ao DOM - JavaScript

Embora o JavaScript não seja limitado ao navegador e à web em geral, ainda é uma de suas principais tarefas interagir com o usuário e manipular elementos de uma página da web no navegador. Para o JavaScript, a página da web está acessível como um modelo de objeto de documento, ou abreviadamente, DOM(Document Object Model). O DOM descreve a estrutura da página da web como uma representação hierárquica e oferece ao desenvolvedor uma maneira de acessar elementos individuais da página da web.

É importante não confundir os conceitos de BOM, que é o Modelo de Objeto do Navegador (Browser Object Model), e DOM (Modelo de Objeto de Documento). Enquanto o BOM oferece acesso ao navegador e suas propriedades como um todo, o DOM fornece acesso a uma página da web ou documento HTML e seus elementos.

Por exemplo, considere uma página simples:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h2>Page Header</h2>
    <div>
        <h3>Block Header</h3>
        <p>Text</p>
    </div>
</body>
</html>

A árvore DOM para esta página é ilustrada abaixo:

Assim, todos os componentes são organizados no DOM de maneira hierárquica, onde cada componente representa um nó separado. Isso significa que cada elemento, como um elemento div, é um nó. O texto dentro de um elemento também é considerado um nó.

Existem os seguintes tipos de nós:

Document: o nó raiz de um documento HTML, representando o documento inteiro.
Element: um elemento HTML.
Text: o texto dentro de um elemento.
Attr: um atributo de um elemento HTML.
DocumentType: DTD(Document Type Definition) ou tipo de esquema de um documento XML.
DocumentFragment: um local para armazenamento temporário de partes de um documento.
EntityReference: uma referência a uma entidade em um documento XML.
ProcessingInstruction: uma instrução de processamento para a página da web.
Comment: um elemento de comentário.
CDATASection: uma seção CDATA em um documento XML.
Entity: uma entidade não processada em DTD.
Notation: uma notação declarada em DTD.

Apesar de haver muitos tipos de nós, geralmente os primeiros quatro tipos são os mais utilizados.