logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

DOM - Document Object Model

Até este momento do curso, nós já aprendemos a criar variáveis, atribuir-lhes valores, já falamos sobre alguns dos tipos dos quais podem ser estes valores e já fizemos algumas operações com eles. Já estamos avançando, entretanto ainda não fizemos grandes coisas, já que estávamos apenas soltando os valores das variáveis no console.

As coisas vão começar a ficar um pouco mais interessantes agora, pois vamos começar a trabalhar com os elementos html da página. Com isso vamos conseguir soltar os valores das variáveis dentro da nossa página, vamos poder alterar o css dos elementos e posteriormente monitorar eventos para tornar nossa página interativa. Para isso, precisamos primeiro conhecer o DOM.

O que é o DOM?

O Document Object Model é um objeto criado pelo browser assim que a página é carregada. Ele guarda toda a estrutura da página. Vamos ver um exemplo simples abaixo:

                    
    
    <html>
        
        <head>
            <title>Página simples em html</title>
        </head>
        
        <body>
            <h1>Heading da página</h1>
            <p>Parágrafo da página</p>
        </body>

    </html>

                    
                

Quando esta página é carregada, o browser monta o DOM, que tem uma estrutura de árvore, como na figura abaixo:

Document Object Model
Imagem: Representação em árvore do documento HTML.

Duas coisas importantes de se notar na figura são que nesta estrutura em árvore, existe uma hierarquia, portanto elementos tem "pai" (parent) e filhos (child elements). Isto será usado mais tarde, para por exemplo, alterar todos os filhos de algum elemento específico.

A segunda coisa, é que o elemento document é o que está acima de todos os outros e é por meio dele que vamos ter acesso a todos os elementos da nossa página.

Em resumo, a partir do DOM, nós poderemos:

Agora que já sabemos o que é o DOM e o que podemos fazer com ele, na próxima aula vamos começar a usá-lo na prática.

Índice de Aulas