Você tem agora uma porção de ferramentas na sua caixa para achar elementos.
E elas será ótimas muitas vezes
Mas tem uma ferramenta final que é a mais poderosa de todas:
a habilidade de achar elementos baseados no seletor CSS.
Você se lembra dos seletores CSS?
Os mais simples são encontrados pelo nome da tag
ou id
ou a classe
Mas existem muito seletores mais avançados:
seletores descendentes, seletores atributos, combinando classe e elemento--
esta é uma boa hora para você rever os seletores CSS
Se você se esqueceu de todos eles.
Por exemplo, se eu quiser estilizar especificamente somente os elementos
com a classe "animal" que estão dentro de um parágrafo?
Vamos colocar uma tag e fazer isso.
Então eu primeiro escrevo 'p',
e então um espaço, para dizer que estou procurando dentro dos ''s,
e então ponto animal para dizer que estou olhando para qualquer elemento
com a classe "animal"
E eu vou apenas colorir de vermelho.
Lindo.
Agora, eu poderia usar o mesmo seletor CSS para achar elementos no JavaScript,
usando o método 'documento.querySelectorAll().
Então eu irei alterar apenas esta linha aqui
E eu preciso passar o seletor CSS como argumento,
como uma string entre aspas.
E aqui, o parágrafo é sobre gatos de novo.
Você poderia passar qualquer seletor CSS válido para este função.
e ela retornará uma coleção de elementos.
que você pode percorrer.
Você se lembra na última vez que dissemos
que 'getElementsByTagName()' retorna uma coleção HTML
que parece muito com uma matriz?
Bem, este método retorna um 'NodeList' que é bem parecido também,
nele podemos usar colchetes, podemos checar seu tamanho, tudo isto.
E você provavelmente não irá ver diferenças entre
um NodeList e um HTMLCollection quando você usa estes métodos.
Mas você é convidado a pesquisar sobre eles se quiser aprender mais.
Ok, agora, tem também um método que irá olhar seletores CSS,
e retornará apenas um elemento, se você souber seu seletor CSS
ele seleciona apenas uma coisa.
Na prática, não é muito útil,
porque nós temos o id que você pode usar nestes casos.
Mas eu vou lhe mostrar ainda assim.
Então aqui, ao invés de 'getElementById', Eu posso dizer:
'document.querySelector("'
e para encontrar o elemento pelo id eu simplestemente adiciono um um sustenido
Ta-da
Então, como você vê, é parecido com 'querySelectorAll()',
exceto que nós selecionamos um, então é só 'querySelector()',
e nós passamos alguns seletores que esperamos trazer um elemento.
Então quando você deve usar cada uma destas ferramentas na sua caixa?
As primeiras que lhe mostrei tendem a ter melhor performance.
Então eu sugiro usá-las onde puder.
Mas se você estiver numa situação que necessite de um seletor mais complexo,
e você não puder usar eles, então 'querySelectorAll()' é seu amigo.
Tente o próximo desafio,
então prepare-se para ver formas e mais formas de manipular esta página web.
Legendado por Francis Pires