Exercício 4 - Explicação da Saída do Código DOM

Saída Esperada

A saída gerada lista os tipos de objetos encontrados na árvore DOM:

[object Text]
[object HTMLHeadingElement]
[object Text]
[object HTMLInputElement]
[object Text]
[object Comment]
[object Text]
[object HTMLPreElement]
[object Text]
[object HTMLScriptElement]
true
true
true
true
true
[object HTMLDocument]
    

Explicação dos Tipos

• Text: Representa os espaços em branco ou texto dentro dos elementos.
• HTMLHeadingElement: Representa o elemento <h1>.
• HTMLInputElement: Representa o campo de entrada <input>.
• Comment: Representa um nó de comentário no HTML.
• HTMLPreElement: Representa o elemento <pre>, usado para exibir texto pré-formatado.
• HTMLScriptElement: Representa o elemento <script>.
• true: As verificações instanceof confirmam que o input pertence às classes apropriadas (HTMLInputElement, HTMLElement, Element, Node e EventTarget).
• HTMLDocument: Representa o próprio documento HTML.

Ao carregar uma página, o navegador percorre o respectivo código HTML e monta uma estrutura de dados internamente denominada árvore DOM, que é uma representação em memória de toda a estrutura do documento HTML. Nessa estrutura, cada elemento, comentário ou texto do documento HTML é representado como um objeto, denominado nó. A árvore DOM permite a manipulação do documento HTML dinamicamente, utilizando programação, com a DOM API e a JavaScript.