Pensei em fazer uma colaboração com meus 10 centavos de conhecimento em javascript, mas que acho que pode ajudar a quem está iniciando do zero.
-
Primeiramente, na aula 1 de JS básico, foi disponibilizada uma apostila, que apesar de estar em uma ordem um pouco confusa, tem bastante conteúdo que pode ajudar a quem está iniciando na linguagem, e ficou um pouco perdido com as aulas do JC.
-
O tópico a seguir foi feito a partir da minha base de conhecimento de estudo da liguagem nos últimos 4 meses, quando comecei do zero também. Logo, sugestões e correções são mais que bem vindas!
Manipulação do DOM (Document Object Model)
O DOM é uma interface entre o HTML e o javascript. Utilizamos ele ao manipular elementos HTML, no arquivo JS linkado, ou na tag do hmtl.
Sempre que é manipulado um elemento html através do JS, é feita uma alteração no DOM, e essa alteração é refletida automaticamente na tela.
Para acessar um elemento html, usamos:
document.metodoParaAcessarElemento(“tag/id/class”)
O conteúdo do elemento acessado, pode ser armazenado em uma variável, para facilitar a vida de quem está programando, caso precise apontar/modificar esse elemento algumas vezes.
exemplo:
let elementoX = document.getElementById(“textoX”)Existem alguns métodos que podemos utilizar para acessar esses elementos, e cada um tem uma característica. São eles:
document.getElementById()
document.getElementByClassName()
document.getElementByCTagName()
document.querySelector()
document.querySelectorAll().getElementById()
Como descrito no próprio nome, ele pega um elemento pelo Id. Logo, para utilizar este método, o elemento em questão precisa estar identificado com um id, e como uma id só pode pertencer a um elemento, ele irá retornar exatamente o que está buscando..getElementsByClassName()
Bom, esse também é fácil de entender. Este método captura elementos pelo nome da classe que o elemento foi identificado. Porém, aqui como sabemos, múltiplos elementos podem ser identificados com a mesma classe, e aí que precisamos ficar atentos. Diferente do método acima, ele não retornará apenas um elemento, mas sim um html collection, semelhante a array, com todos o elementos que possuem a mesma classe. Mesmo que apenas um elemento tenha o className indicado, será retornado um html collection de um elemento no índice 0..getElementsByTagName()
Este método requer a mesma atenção que o anterior, já que podemos utilizar uma tag várias vezes. Então o retorno deste método é um html collection com todas as vezes que essa tag foi utilizada. Porém, se por exemplo eu tenho 3 vezes a tag ul no meu arquivo html, mas eu já sei que quero acessar apenas a 2° ul, posso indicar da seguinte forma:
document.getElementsByTagName(“ul”)[1]Observações:
- Os 3 métodos getElement… são vivos. Isso significa que se seu valor foi armazenado em uma variável, e após isso, forem feitas modificações nesse elemento, o valor da variável será atualizado sempre que houver alteração (até porque a variável neste caso na verdade guarda uma referência do elemento, não ele em si), logo não se faz necessário chamar document.getElement… novamente.
- HTML Collections são lista interativas que se modificam conforme o documento é alterado no DOM. Seu retorno é uma coleção de objetos html, organizados em um array, o que permite utilizar métodos de array nessa lista..querySelector()
Retorna a primeira ocorrência do elemento indicado. Pode ser indicado tanto tag, como id e class.
Este método recebe uma sinalização parecida com CSS para indicar se o nome indicado para buscar um elemento é uma tag, id, ou class. Então, para tag, basta apenas escrever o nome da tag em questão entre aspas. Porém, para indicar um id, deve-se utilizar # antes do nome (exemplo: ("#primeiroId"). E para sinalizar que trata-se de uma classe, utilizar . antes do nome (exemplo: (".barraNavegacao")..querySelectorAll()
Este método possuí as mesmas regrinhas de identificação para classe e id, do descrito anteriormente. A diferença é que esta, retorna todas as ocorrências do elemento indicado, tanto para classe quanto tag.
Diferente do getElementsByClassName() e getElementsByTagName(), o querySelectorAll() retorna um node list contendo nós de elementos. Uma node list é parecida com um array, mas não possuí os mesmos métodos de um array, o que as vezes acaba sendo menos prático. Outro ponto, é que caso queira acessar um elemento específico, deve-se passar o índice em que ele está nessa node list, assim como é com array.Observações:
- O .querySelectorAll() retorna uma node list estática, isso significa que mesmo que no DOM sejam adicionadas novas tags, o nodelist continuará mostrando o número de itens inicial.
- Um ponto interessante do .querySelectorAll é que ele te permite acessar elementos filhos (contidos dentro de outro elemento). Por exemplo, tenho uma tag ul com id=“lista2”, que contém 3 tags li, e quero acessar apenas as ‘lis’. Neste caso posso acessar da seguinte forma:
let lis = document.querySelectorAll("#lista2 li")
O que será armazenado na variável lis é uma node list com as 3 li do nó da ul.
- Node List são coleções de nós retornadas pelos métodos document.querySelectorAll() (coleção estática), e Node.childNodes (coleção viva).
Por fim, existem muitas maneiras de navegar entre os nós, o que ajuda bastante a acessar alguns elementos que estão pertinho de algum elemento já “capturado” no nosso JS. Caso se interessem, posso fazer outro post sobre isso, ou editar esse.
