tutoriais mais recente desenvolvimento web
 

JavaScript HTML DOM


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


O HTML DOM (Document Object Model)

Quando uma página é carregada, o navegador cria um Document Object Model da página.

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

O HTML DOM Tree of Objects

árvore DOM HTML

Com o modelo de objeto, JavaScript recebe toda a energia de que necessita para criar HTML dinâmico:

  • JavaScript pode mudar todos os elementos HTML na página
  • JavaScript pode mudar todos os atributos HTML na página
  • JavaScript pode mudar todos os estilos CSS na página
  • JavaScript pode remover elementos HTML e atributos 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

O que você aprenderá

Nos próximos capítulos deste tutorial, você vai aprender:

  • Como alterar o conteúdo de elementos HTML
  • Como alterar o estilo (CSS) de elementos HTML
  • Como reagir ao HTML eventos DOM
  • Como adicionar e excluir elementos HTML

Qual é o DOM?

O DOM é um W3C (World Wide Web Consortium) padrão.

O DOM define um padrão para aceder aos documentos:

"O modelo de objeto do W3C DOM (Document) é uma interface de plataforma e linguagem neutra que permite que programas e scripts para acessar e atualizar o conteúdo, estrutura e estilo de um documento dinamicamente."

O padrão W3C DOM é separado em 3 partes distintas:

  • DOM núcleo - modelo padrão para todos os tipos de documentos
  • DOM XML - modelo padrão para documentos XML
  • HTML DOM - modelo padrão para documentos HTML

Qual é o DOM HTML?

O HTML DOM é um modelo de objeto e interface de programação padrão para HTML. Ele define:

  • Os elementos HTML comoobjetos
  • Aspropriedades de todos os elementos HTML
  • Osmétodos para acessar todos os elementos HTML
  • Os eventos para todos os elementos HTML

Em outras palavras:O DOM HTML é um padrão para como chegar, alterar, adicionar ou eliminar elementos HTML.