freeCodeCamp/guide/portuguese/javascript/html-dom/index.md

1.2 KiB

title localeTitle
HTML Dom HTML Dom

HTML Dom

Com o HTML DOM, o JavaScript pode acessar e alterar todos os elementos de um documento HTML.

Quando uma página da web é carregado, o navegador cria um D ocument O bject M odelo da página.

O modelo HTML DOM é construído como uma árvore de objetos:

Cada elemento no DOM também é chamado de nó.


<html> 
 <head> 
  <title> My title </title> 
 </head> 
 <body> 
  <a href="#">My Link</a> 
  <h1> My header </h1> 
 </body> 
 </html> 

O DOM do HTML acima é o seguinte:

Árvore DOM

Com o modelo de objeto, o JavaScript obtém todo o poder necessário para criar HTML dinâmico:

  • JavaScript pode mudar todos os elementos HTML da página
  • JavaScript pode alterar todos os atributos HTML na página
  • JavaScript pode mudar todos os estilos CSS na página
  • JavaScript pode remover elementos e atributos HTML existentes
  • JavaScript pode adicionar novos elementos e atributos HTML
  • JavaScript pode reagir a todos os eventos HTML existentes na página
  • JavaScript pode criar novos eventos HTML na página

Mais Informações:

W3C - DOM HTML