1
00:00:02,084 --> 00:00:06,101
Você tem agora uma porção de ferramentas
na sua caixa para achar elementos.

2
00:00:06,101 --> 00:00:08,645
E elas será ótimas muitas vezes

3
00:00:08,645 --> 00:00:12,492
Mas tem uma ferramenta final
que é a mais poderosa de todas:

4
00:00:12,492 --> 00:00:18,070
a habilidade de achar elementos
baseados no seletor CSS.

5
00:00:18,070 --> 00:00:20,384
Você se lembra dos seletores CSS?

6
00:00:20,384 --> 00:00:24,562
Os mais simples são encontrados
pelo nome da tag

7
00:00:24,562 --> 00:00:26,170
ou id

8
00:00:26,170 --> 00:00:27,518
ou a classe

9
00:00:27,518 --> 00:00:30,027
Mas existem muito seletores
mais avançados:


10
00:00:30,027 --> 00:00:35,333
seletores descendentes, seletores 
atributos, combinando classe e elemento--

11
00:00:35,333 --> 00:00:38,547
esta é uma boa hora para você
rever os seletores CSS

12
00:00:38,547 --> 00:00:40,643
Se você se esqueceu de todos eles.

13
00:00:40,643 --> 00:00:45,642
Por exemplo, se eu quiser estilizar
especificamente somente os elementos

14
00:00:45,642 --> 00:00:50,765
com a classe "animal" que estão
dentro de um parágrafo?

15
00:00:50,765 --> 00:00:54,606
Vamos colocar uma tag  e 
fazer isso.

16
00:00:54,606 --> 00:00:57,124
Então eu primeiro escrevo 'p',

17
00:00:57,124 --> 00:01:01,532
e então um espaço, para dizer que
estou procurando dentro dos ''s,

18
00:01:01,532 --> 00:01:06,492
e então ponto animal para dizer que
estou olhando para qualquer elemento

19
00:01:06,492 --> 00:01:09,603
com a classe "animal"

20
00:01:09,603 --> 00:01:12,671
E eu vou apenas colorir de vermelho.

21
00:01:12,671 --> 00:01:14,130
Lindo.

22
00:01:14,130 --> 00:01:19,665
Agora, eu poderia usar o mesmo seletor CSS
para achar elementos no JavaScript,

23
00:01:19,665 --> 00:01:24,944
usando o método
'documento.querySelectorAll().

24
00:01:24,944 --> 00:01:30,323
Então eu irei alterar apenas esta 
linha aqui

25
00:01:30,323 --> 00:01:35,377
E eu preciso passar o seletor CSS 
como argumento,

26
00:01:35,377 --> 00:01:38,392
como uma string entre aspas.

27
00:01:38,392 --> 00:01:42,486
E aqui, o parágrafo é 
sobre gatos de novo.

28
00:01:42,486 --> 00:01:45,823
Você poderia passar qualquer
seletor CSS válido para este função.

29
00:01:45,823 --> 00:01:48,414
e ela retornará uma coleção de elementos.

30
00:01:48,414 --> 00:01:50,883
que você pode percorrer.

31
00:01:50,883 --> 00:01:53,507
Você se lembra na última vez 
que dissemos

32
00:01:53,507 --> 00:01:57,617
que 'getElementsByTagName()' retorna
uma coleção HTML

33
00:01:57,617 --> 00:01:59,998
que parece muito com uma matriz?

34
00:01:59,998 --> 00:02:06,710
Bem, este método retorna um 'NodeList'
que é bem parecido também,

35
00:02:06,710 --> 00:02:12,530
nele podemos usar colchetes, podemos 
checar seu tamanho, tudo isto.

36
00:02:12,530 --> 00:02:16,282
E você provavelmente não irá ver
diferenças entre

37
00:02:16,282 --> 00:02:20,029
um NodeList e um HTMLCollection
quando você usa estes métodos.

38
00:02:20,029 --> 00:02:24,375
Mas você é convidado a pesquisar sobre
eles se quiser aprender mais.

39
00:02:24,375 --> 00:02:28,924
Ok, agora, tem também um método
que irá olhar seletores CSS,

40
00:02:28,924 --> 00:02:32,782
e retornará apenas um elemento,
se você souber seu seletor CSS

41
00:02:32,782 --> 00:02:35,061
ele seleciona apenas uma coisa.

42
00:02:35,061 --> 00:02:37,409
Na prática, não é muito útil,

43
00:02:37,409 --> 00:02:40,458
porque nós temos o id que você
pode usar nestes casos.

44
00:02:40,458 --> 00:02:43,079
Mas eu vou lhe mostrar ainda assim.

45
00:02:43,079 --> 00:02:46,310
Então aqui, ao invés de 'getElementById',
Eu posso dizer:

46
00:02:46,310 --> 00:02:48,577
'document.querySelector("'

47
00:02:48,577 --> 00:02:53,565
e para encontrar o elemento pelo id
eu simplestemente adiciono um um sustenido

48
00:02:53,565 --> 00:02:54,520
Ta-da

49
00:02:54,520 --> 00:02:57,917
Então, como você vê, é parecido
com 'querySelectorAll()',

50
00:02:57,917 --> 00:03:01,547
exceto que nós selecionamos um, 
então é só 'querySelector()',

51
00:03:01,547 --> 00:03:06,510
e nós passamos alguns seletores
que esperamos trazer um elemento.

52
00:03:06,510 --> 00:03:10,434
Então quando você deve usar
cada uma destas ferramentas na sua caixa?

53
00:03:10,434 --> 00:03:13,702
As primeiras que lhe mostrei
tendem a ter melhor performance.

54
00:03:13,702 --> 00:03:15,734
Então eu sugiro usá-las onde puder.

55
00:03:15,734 --> 00:03:19,587
Mas se você estiver numa situação
que necessite de um seletor mais complexo,

56
00:03:19,587 --> 00:03:24,053
e você não puder usar eles,
então 'querySelectorAll()' é seu amigo.

57
00:03:24,053 --> 00:03:26,109
Tente o próximo desafio,

58
00:03:26,109 --> 00:03:28,573
então prepare-se para ver formas e mais 
formas de manipular esta página web.

59
00:03:29,000 --> 00:03:33,000
Legendado por Francis Pires