Finding elements by CSS selector (Video Version)

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