Pular para o conteúdo principal

JAVASCRIPT DOM O GUIA

O que é o DOM?   Significa Document Object Model ,usado para manipular conteúdos,estilos e estrutura do nosso documento HTML. Se você é um desenvolvedor web é crucial que você saiba usar o Javascript(DOM), para saber como os frameworks front-ends funcionam por debaixo do pano. Ou a empresa que você trabalha ainda utiliza o html e javascript sem nenhum framework. Arvore DOM O dom trabalha com todos os elementos que estão dentro da tag html assim como na arvore acima. selecionando elementos do html podemos selecionar os documentos html, por classe ,id, tag ou ate mesmo pelo query que seleciona como o CSS. veremos aqui as funções que selecionam nossos elementos. getElementById() // seleciona por id getElementByClass() // seleciona por classe getElementByTagName() // seleciona por <tag> querySelector() // seleciona tipo CSS mas apenas o primeiro elemento querySelectorAll() // seleciona tipo CSS mas todos os elementos  para usarmos essas funções nos precisamos colocar o objet...

JAVASCRIPT DOM O GUIA

O que é o DOM?

 

Significa Document Object Model ,usado para manipular conteúdos,estilos e estrutura do nosso documento HTML.

Se você é um desenvolvedor web é crucial que você saiba usar o Javascript(DOM), para saber como os frameworks front-ends funcionam por debaixo do pano. Ou a empresa que você trabalha ainda utiliza o html e javascript sem nenhum framework.


Arvore DOM




O dom trabalha com todos os elementos que estão dentro da tag html assim como na arvore acima.

selecionando elementos do html

podemos selecionar os documentos html, por classe ,id, tag ou ate mesmo pelo query que seleciona como o CSS.

veremos aqui as funções que selecionam nossos elementos.

  • getElementById() // seleciona por id
  • getElementByClass() // seleciona por classe
  • getElementByTagName() // seleciona por <tag>
  • querySelector() // seleciona tipo CSS mas apenas o primeiro elemento
  • querySelectorAll() // seleciona tipo CSS mas todos os elementos


 para usarmos essas funções nos precisamos colocar o objeto document e depois as funções citadas anteriormente e o parâmetro (id,class,element) 



Estilizando elementos via DOM


Vimos acima como selecionamos os nossos elementos, agora vamos ver como estilizar os elementos selecionados.

Para fazermos isso usamos o .style e depois a propriedade css em camelCase , exemplos [color, backgrounColor, borderColor]+etc

Irei deixar um link mostrando todos as propriedades

Style objects 



 Criando elemento via DOM

Para criarmos um elemento usamos o método createElement() com uma tag como parâmetro , em seguida adicionamos conteúdo no nosso elemento com os selecionadores de textos que veremos mais tarde, Depois atribuímos o nosso conteúdo ao nosso elemento e em seguida adicionamos o elemento criado dentro de uma tag pai usando a função appendChild() ou append().

veja o exemplo :


 

 

Modificando conteúdos dos elementos 

Para modificarmos precisamos escolher quais das seguintes métodos  iremos usar.

  • innerText ⇒  define ou retorna o conteúdo do elemento
  • innerHTML  ⇒  define ou retorna o html do elemento selecionado.
  • textContent ⇒ define ou retorna o conteúdo de texto do nó especificado e todos os seus descendentes.

Depois de escolher  o método nos usamos o elemento selecionado junto com o método(inner) atribuindo um novo valor .

Exemplo :


 

 Removendo Elementos

Para removermos elementos nos usamos o método .remove(elemento)

 Exemplo :


 


Criando eventos 

Para criarmos eventos precisamos usar o método .addEventListener(), com os seguintes parâmetros ("tipo do evento", função ) , irei disponibilizar um link com uma lista de tipos de eventos :

Lista 

a função define o que fazer depois do evento ser acionado , lembra das matérias de logica de programação e algoritmo? Então vou fazer um pequeno pseudocódigo.

se evento tal for realizado então executa função tal.


Exemplo com Códigos :

nesse caso cada vez que o elemento document for clicado o elemento #demo tera como conteúdo o Hello world


The end

Então é isso meus amigos espero que tenham gostado desse artigo e que entenderam esse tal de DOM


meu linkedin : https://www.linkedin.com/in/ysrael-sacrati/

meu gitHub : https://github.com/ysrael12

Comentários

Postagens mais visitadas deste blog

top 5 linguagens de programação que estarão bombando nos proximos 10 anos

  Essas linguagens não são classificados em nenhuma ordem específica, pois acredito que a proficiência em qualquer um desses conjuntos de habilidades será valiosa no futuro próximo. Eles serão procurados pelo menos durante a próxima década e continuarão a receber altos salários. Essas linguagens viverão por muito tempo e certamente as recomendamos para quem deseja entrar no setor de desenvolvimento de software. Golang (Go) Estamos no processo de mover alguns códigos de produção legados do lado do servidor para Golang, por exemplo a Globo adotou o Go em vez do java para fazer os seu back-end. Go foi desenvolvida pelo Google por alguns pioneiros das linguagens de programação e Unix. Por causa de sua credibilidade e suporte, juntamente com sua utilidade e crescente popularidade, acreditamos que será procurado nos próximos anos.   Python Minha linguagem preferida . Ela é um canivete suíço das linguagens de programação, porque você pode fazer praticamente qualquer coisa com o Py. É...

O código limpo

  Escrever um código limpo, compreensível e sustentável é uma habilidade crucial para todo desenvolvedor dominar. Um código limpo , economiza tempo , dinheiro e armazenamento , e também mostra que sua equipe controlando o código não o código controlando sua equipe. Por isso que nos temos que manter a habilidade de limpa sempre em pratica. Resumão dos preceitos Como nomear variaveis e etc? os nomes são muito mais fáceis de lembrar. E, mais importante, eles podem fornecer mais informações sobre a variável, para que outra pessoa possa entender seu significado. Por isso é importante definir bons nomes. Criando nomes Não use comentários para explicar por que uma variável é usada. Se um no...