Tutorial DOM de JavaScript com exemplo

Índice:

Anonim

O que é DOM em JavaScript?

JavaScript pode acessar todos os elementos em uma página da web usando o Document Object Model (DOM). Na verdade, o navegador da web cria um DOM da página da web quando a página é carregada. O modelo DOM é criado como uma árvore de objetos como este:

Como usar DOM e eventos

Usando o DOM, o JavaScript pode realizar várias tarefas. Ele pode criar novos elementos e atributos, alterar os elementos e atributos existentes e até mesmo remover elementos e atributos existentes. JavaScript também pode reagir a eventos existentes e criar novos eventos na página.

getElementById, Exemplo de innerHTML

  1. getElementById: Para acessar elementos e atributos cujo id é definido.
  2. innerHTML: Para acessar o conteúdo de um elemento.

Experimente este exemplo você mesmo:

 DOM !!! 

Bem-vindo


Esta é a mensagem de boas-vindas.



Tecnologia


Esta é a seção de tecnologia.

Exemplo de manipulador de eventos

  1. createElement: Para criar um novo elemento
  2. removeChild: remove um elemento
  3. Você pode adicionar um manipulador de eventos a um elemento específico como este:
 document.getElementById(id).onclick=function(){lines of code to be executed}

OU

document.getElementById(id).addEventListener("click", functionname)

Experimente este exemplo você mesmo:

 DOM !!!