Você sabia que podemos usar JavaScript para manipular conteúdo na página da web? Parece interessante, certo? Vamos entender o que é Document Object Model, ou seja. DOM em JavaScript da seguinte maneira:
- O que é DOM em JavaScript?
- Ações de DOM em JavaScript
- Consultando o DOM
- Ouvindo Eventos
- Interagindo com formulários
- Criação de elementos HTML
- Adicionando CSS
O que é DOM em JavaScript?
O Document Object Model ou DOM é criado pelo navegador quando uma página da web é carregada. Na forma gráfica, é como uma árvore de elementos também chamada de nós, que são usados para representar cada elemento da página.
Todo o DOM de nossa página da web fica dentro do objeto de documento. De forma programática, esse modelo nos permite ler ou até mesmo alterar o conteúdo de nossa página por meio de . Não é legal?
Ações de DOM em JavaScript
Algumas das ações que podemos realizar com este modelo são:
Altere / remova elementos HTML no DOM / na página.
implementação simples de hashmap em java
Alterar e adicionar estilos CSS aos elementos
Leia e altere atributos (href, src, alt), etc.
Crie novos elementos e insira-os na página / DOM.
Anexar ouvintes de eventos a elementos (clique, pressionamento de tecla, envio)
Consultando o DOM em JavaScript
Pegar um elemento HTML ou pegá-lo para adicionar / alterar ou conteúdo é chamado de consulta.
Código HTML:
Javascript e o DOM h1 {font-size: 60px}Código JavaScript:
var title = document.getElementById ('title') // cgangin cor para vermelho title.style.color = 'red' var body = document.getElementById ('body') // alterando a cor de fundo para azul claro body.style. backgroundColor = 'azul claro'Mudamos a cor do texto do título de preto para vermelho usando JavaScript. Conseguimos isso usando o .estilo propriedade então mudou o valor de cor igual a internet .
Agora vamos mudar a cor de fundo do elemento do corpo para azul claro .
aprendizado profundo vs aprendizado de máquina vs reconhecimento de padrões
Com isso, chegamos ao fim deste artigo DOM em JavaScript. Espero que você tenha entendido como os Modelos de Objetos de Documento funcionam e como implementar o mesmo DOM em JavaScript.
Agora que você sabe sobre DOM em JavaScript, verifique o por Edureka. O Treinamento de Certificação de Desenvolvimento Web o ajudará a aprender como criar sites impressionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery e APIs do Google e implementá-lo no Amazon Simple Storage Service (S3).
Tem alguma questão para nós? Mencione isso na seção de comentários de “DOM em JavaScript” e entraremos em contato com você.