WEBVTT

00:00:02.084 --> 00:00:06.101
Você tem agora uma porção de ferramentas
na sua caixa para achar elementos.

00:00:06.101 --> 00:00:08.645
E elas será ótimas muitas vezes

00:00:08.645 --> 00:00:12.492
Mas tem uma ferramenta final
que é a mais poderosa de todas:

00:00:12.492 --> 00:00:18.070
a habilidade de achar elementos
baseados no seletor CSS.

00:00:18.070 --> 00:00:20.384
Você se lembra dos seletores CSS?

00:00:20.384 --> 00:00:24.562
Os mais simples são encontrados
pelo nome da tag

00:00:24.562 --> 00:00:26.170
ou id

00:00:26.170 --> 00:00:27.518
ou a classe

00:00:27.518 --> 00:00:30.027
Mas existem muito seletores
mais avançados:


00:00:30.027 --> 00:00:35.333
seletores descendentes, seletores 
atributos, combinando classe e elemento--

00:00:35.333 --> 00:00:38.547
esta é uma boa hora para você
rever os seletores CSS

00:00:38.547 --> 00:00:40.643
Se você se esqueceu de todos eles.

00:00:40.643 --> 00:00:45.642
Por exemplo, se eu quiser estilizar
especificamente somente os elementos

00:00:45.642 --> 00:00:50.765
com a classe "animal" que estão
dentro de um parágrafo?

00:00:50.765 --> 00:00:54.606
Vamos colocar uma tag  e 
fazer isso.

00:00:54.606 --> 00:00:57.124
Então eu primeiro escrevo 'p',

00:00:57.124 --> 00:01:01.532
e então um espaço, para dizer que
estou procurando dentro dos ''s,

00:01:01.532 --> 00:01:06.492
e então ponto animal para dizer que
estou olhando para qualquer elemento

00:01:06.492 --> 00:01:09.603
com a classe "animal"

00:01:09.603 --> 00:01:12.671
E eu vou apenas colorir de vermelho.

00:01:12.671 --> 00:01:14.130
Lindo.

00:01:14.130 --> 00:01:19.665
Agora, eu poderia usar o mesmo seletor CSS
para achar elementos no JavaScript,

00:01:19.665 --> 00:01:24.944
usando o método
'documento.querySelectorAll().

00:01:24.944 --> 00:01:30.323
Então eu irei alterar apenas esta 
linha aqui

00:01:30.323 --> 00:01:35.377
E eu preciso passar o seletor CSS 
como argumento,

00:01:35.377 --> 00:01:38.392
como uma string entre aspas.

00:01:38.392 --> 00:01:42.486
E aqui, o parágrafo é 
sobre gatos de novo.

00:01:42.486 --> 00:01:45.823
Você poderia passar qualquer
seletor CSS válido para este função.

00:01:45.823 --> 00:01:48.414
e ela retornará uma coleção de elementos.

00:01:48.414 --> 00:01:50.883
que você pode percorrer.

00:01:50.883 --> 00:01:53.507
Você se lembra na última vez 
que dissemos

00:01:53.507 --> 00:01:57.617
que 'getElementsByTagName()' retorna
uma coleção HTML

00:01:57.617 --> 00:01:59.998
que parece muito com uma matriz?

00:01:59.998 --> 00:02:06.710
Bem, este método retorna um 'NodeList'
que é bem parecido também,

00:02:06.710 --> 00:02:12.530
nele podemos usar colchetes, podemos 
checar seu tamanho, tudo isto.

00:02:12.530 --> 00:02:16.282
E você provavelmente não irá ver
diferenças entre

00:02:16.282 --> 00:02:20.029
um NodeList e um HTMLCollection
quando você usa estes métodos.

00:02:20.029 --> 00:02:24.375
Mas você é convidado a pesquisar sobre
eles se quiser aprender mais.

00:02:24.375 --> 00:02:28.924
Ok, agora, tem também um método
que irá olhar seletores CSS,

00:02:28.924 --> 00:02:32.782
e retornará apenas um elemento,
se você souber seu seletor CSS

00:02:32.782 --> 00:02:35.061
ele seleciona apenas uma coisa.

00:02:35.061 --> 00:02:37.409
Na prática, não é muito útil,

00:02:37.409 --> 00:02:40.458
porque nós temos o id que você
pode usar nestes casos.

00:02:40.458 --> 00:02:43.079
Mas eu vou lhe mostrar ainda assim.

00:02:43.079 --> 00:02:46.310
Então aqui, ao invés de 'getElementById',
Eu posso dizer:

00:02:46.310 --> 00:02:48.577
'document.querySelector("'

00:02:48.577 --> 00:02:53.565
e para encontrar o elemento pelo id
eu simplestemente adiciono um um sustenido

00:02:53.565 --> 00:02:54.520
Ta-da

00:02:54.520 --> 00:02:57.917
Então, como você vê, é parecido
com 'querySelectorAll()',

00:02:57.917 --> 00:03:01.547
exceto que nós selecionamos um, 
então é só 'querySelector()',

00:03:01.547 --> 00:03:06.510
e nós passamos alguns seletores
que esperamos trazer um elemento.

00:03:06.510 --> 00:03:10.434
Então quando você deve usar
cada uma destas ferramentas na sua caixa?

00:03:10.434 --> 00:03:13.702
As primeiras que lhe mostrei
tendem a ter melhor performance.

00:03:13.702 --> 00:03:15.734
Então eu sugiro usá-las onde puder.

00:03:15.734 --> 00:03:19.587
Mas se você estiver numa situação
que necessite de um seletor mais complexo,

00:03:19.587 --> 00:03:24.053
e você não puder usar eles,
então 'querySelectorAll()' é seu amigo.

00:03:24.053 --> 00:03:26.109
Tente o próximo desafio,

00:03:26.109 --> 00:03:28.573
então prepare-se para ver formas e mais 
formas de manipular esta página web.

00:03:29.000 --> 00:03:33.000
Legendado por Francis Pires