0:00:02.084,0:00:06.101
Você tem agora uma porção de ferramentas[br]na sua caixa para achar elementos.

0:00:06.101,0:00:08.645
E elas será ótimas muitas vezes

0:00:08.645,0:00:12.492
Mas tem uma ferramenta final[br]que é a mais poderosa de todas:

0:00:12.492,0:00:18.070
a habilidade de achar elementos[br]baseados no seletor CSS.

0:00:18.070,0:00:20.384
Você se lembra dos seletores CSS?

0:00:20.384,0:00:24.562
Os mais simples são encontrados[br]pelo nome da tag

0:00:24.562,0:00:26.170
ou id

0:00:26.170,0:00:27.518
ou a classe

0:00:27.518,0:00:30.027
Mas existem muito seletores[br]mais avançados:[br]

0:00:30.027,0:00:35.333
seletores descendentes, seletores [br]atributos, combinando classe e elemento--

0:00:35.333,0:00:38.547
esta é uma boa hora para você[br]rever os seletores CSS

0:00:38.547,0:00:40.643
Se você se esqueceu de todos eles.

0:00:40.643,0:00:45.642
Por exemplo, se eu quiser estilizar[br]especificamente somente os elementos

0:00:45.642,0:00:50.765
com a classe "animal" que estão[br]dentro de um parágrafo?

0:00:50.765,0:00:54.606
Vamos colocar uma tag  e [br]fazer isso.

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

0:00:57.124,0:01:01.532
e então um espaço, para dizer que[br]estou procurando dentro dos ''s,

0:01:01.532,0:01:06.492
e então ponto animal para dizer que[br]estou olhando para qualquer elemento

0:01:06.492,0:01:09.603
com a classe "animal"

0:01:09.603,0:01:12.671
E eu vou apenas colorir de vermelho.

0:01:12.671,0:01:14.130
Lindo.

0:01:14.130,0:01:19.665
Agora, eu poderia usar o mesmo seletor CSS[br]para achar elementos no JavaScript,

0:01:19.665,0:01:24.944
usando o método[br]'documento.querySelectorAll().

0:01:24.944,0:01:30.323
Então eu irei alterar apenas esta [br]linha aqui

0:01:30.323,0:01:35.377
E eu preciso passar o seletor CSS [br]como argumento,

0:01:35.377,0:01:38.392
como uma string entre aspas.

0:01:38.392,0:01:42.486
E aqui, o parágrafo é [br]sobre gatos de novo.

0:01:42.486,0:01:45.823
Você poderia passar qualquer[br]seletor CSS válido para este função.

0:01:45.823,0:01:48.414
e ela retornará uma coleção de elementos.

0:01:48.414,0:01:50.883
que você pode percorrer.

0:01:50.883,0:01:53.507
Você se lembra na última vez [br]que dissemos

0:01:53.507,0:01:57.617
que 'getElementsByTagName()' retorna[br]uma coleção HTML

0:01:57.617,0:01:59.998
que parece muito com uma matriz?

0:01:59.998,0:02:06.710
Bem, este método retorna um 'NodeList'[br]que é bem parecido também,

0:02:06.710,0:02:12.530
nele podemos usar colchetes, podemos [br]checar seu tamanho, tudo isto.

0:02:12.530,0:02:16.282
E você provavelmente não irá ver[br]diferenças entre

0:02:16.282,0:02:20.029
um NodeList e um HTMLCollection[br]quando você usa estes métodos.

0:02:20.029,0:02:24.375
Mas você é convidado a pesquisar sobre[br]eles se quiser aprender mais.

0:02:24.375,0:02:28.924
Ok, agora, tem também um método[br]que irá olhar seletores CSS,

0:02:28.924,0:02:32.782
e retornará apenas um elemento,[br]se você souber seu seletor CSS

0:02:32.782,0:02:35.061
ele seleciona apenas uma coisa.

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

0:02:37.409,0:02:40.458
porque nós temos o id que você[br]pode usar nestes casos.

0:02:40.458,0:02:43.079
Mas eu vou lhe mostrar ainda assim.

0:02:43.079,0:02:46.310
Então aqui, ao invés de 'getElementById',[br]Eu posso dizer:

0:02:46.310,0:02:48.577
'document.querySelector("'

0:02:48.577,0:02:53.565
e para encontrar o elemento pelo id[br]eu simplestemente adiciono um um sustenido

0:02:53.565,0:02:54.520
Ta-da

0:02:54.520,0:02:57.917
Então, como você vê, é parecido[br]com 'querySelectorAll()',

0:02:57.917,0:03:01.547
exceto que nós selecionamos um, [br]então é só 'querySelector()',

0:03:01.547,0:03:06.510
e nós passamos alguns seletores[br]que esperamos trazer um elemento.

0:03:06.510,0:03:10.434
Então quando você deve usar[br]cada uma destas ferramentas na sua caixa?

0:03:10.434,0:03:13.702
As primeiras que lhe mostrei[br]tendem a ter melhor performance.

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

0:03:15.734,0:03:19.587
Mas se você estiver numa situação[br]que necessite de um seletor mais complexo,

0:03:19.587,0:03:24.053
e você não puder usar eles,[br]então 'querySelectorAll()' é seu amigo.

0:03:24.053,0:03:26.109
Tente o próximo desafio,

0:03:26.109,0:03:28.573
então prepare-se para ver formas e mais [br]formas de manipular esta página web.

0:03:29.000,0:03:33.000
Legendado por Francis Pires