[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:02.08,0:00:06.10,Default,,0000,0000,0000,,Você tem agora uma porção de ferramentas\Nna sua caixa para achar elementos.
Dialogue: 0,0:00:06.10,0:00:08.64,Default,,0000,0000,0000,,E elas será ótimas muitas vezes
Dialogue: 0,0:00:08.64,0:00:12.49,Default,,0000,0000,0000,,Mas tem uma ferramenta final\Nque é a mais poderosa de todas:
Dialogue: 0,0:00:12.49,0:00:18.07,Default,,0000,0000,0000,,a habilidade de achar elementos\Nbaseados no seletor CSS.
Dialogue: 0,0:00:18.07,0:00:20.38,Default,,0000,0000,0000,,Você se lembra dos seletores CSS?
Dialogue: 0,0:00:20.38,0:00:24.56,Default,,0000,0000,0000,,Os mais simples são encontrados\Npelo nome da tag
Dialogue: 0,0:00:24.56,0:00:26.17,Default,,0000,0000,0000,,ou id
Dialogue: 0,0:00:26.17,0:00:27.52,Default,,0000,0000,0000,,ou a classe
Dialogue: 0,0:00:27.52,0:00:30.03,Default,,0000,0000,0000,,Mas existem muito seletores\Nmais avançados:\N
Dialogue: 0,0:00:30.03,0:00:35.33,Default,,0000,0000,0000,,seletores descendentes, seletores \Natributos, combinando classe e elemento--
Dialogue: 0,0:00:35.33,0:00:38.55,Default,,0000,0000,0000,,esta é uma boa hora para você\Nrever os seletores CSS
Dialogue: 0,0:00:38.55,0:00:40.64,Default,,0000,0000,0000,,Se você se esqueceu de todos eles.
Dialogue: 0,0:00:40.64,0:00:45.64,Default,,0000,0000,0000,,Por exemplo, se eu quiser estilizar\Nespecificamente somente os elementos
Dialogue: 0,0:00:45.64,0:00:50.76,Default,,0000,0000,0000,,com a classe "animal" que estão\Ndentro de um parágrafo?
Dialogue: 0,0:00:50.76,0:00:54.61,Default,,0000,0000,0000,,Vamos colocar uma tag  e \Nfazer isso.
Dialogue: 0,0:00:54.61,0:00:57.12,Default,,0000,0000,0000,,Então eu primeiro escrevo 'p',
Dialogue: 0,0:00:57.12,0:01:01.53,Default,,0000,0000,0000,,e então um espaço, para dizer que\Nestou procurando dentro dos ''s,
Dialogue: 0,0:01:01.53,0:01:06.49,Default,,0000,0000,0000,,e então ponto animal para dizer que\Nestou olhando para qualquer elemento
Dialogue: 0,0:01:06.49,0:01:09.60,Default,,0000,0000,0000,,com a classe "animal"
Dialogue: 0,0:01:09.60,0:01:12.67,Default,,0000,0000,0000,,E eu vou apenas colorir de vermelho.
Dialogue: 0,0:01:12.67,0:01:14.13,Default,,0000,0000,0000,,Lindo.
Dialogue: 0,0:01:14.13,0:01:19.66,Default,,0000,0000,0000,,Agora, eu poderia usar o mesmo seletor CSS\Npara achar elementos no JavaScript,
Dialogue: 0,0:01:19.66,0:01:24.94,Default,,0000,0000,0000,,usando o método\N'documento.querySelectorAll().
Dialogue: 0,0:01:24.94,0:01:30.32,Default,,0000,0000,0000,,Então eu irei alterar apenas esta \Nlinha aqui
Dialogue: 0,0:01:30.32,0:01:35.38,Default,,0000,0000,0000,,E eu preciso passar o seletor CSS \Ncomo argumento,
Dialogue: 0,0:01:35.38,0:01:38.39,Default,,0000,0000,0000,,como uma string entre aspas.
Dialogue: 0,0:01:38.39,0:01:42.49,Default,,0000,0000,0000,,E aqui, o parágrafo é \Nsobre gatos de novo.
Dialogue: 0,0:01:42.49,0:01:45.82,Default,,0000,0000,0000,,Você poderia passar qualquer\Nseletor CSS válido para este função.
Dialogue: 0,0:01:45.82,0:01:48.41,Default,,0000,0000,0000,,e ela retornará uma coleção de elementos.
Dialogue: 0,0:01:48.41,0:01:50.88,Default,,0000,0000,0000,,que você pode percorrer.
Dialogue: 0,0:01:50.88,0:01:53.51,Default,,0000,0000,0000,,Você se lembra na última vez \Nque dissemos
Dialogue: 0,0:01:53.51,0:01:57.62,Default,,0000,0000,0000,,que 'getElementsByTagName()' retorna\Numa coleção HTML
Dialogue: 0,0:01:57.62,0:01:59.100,Default,,0000,0000,0000,,que parece muito com uma matriz?
Dialogue: 0,0:01:59.100,0:02:06.71,Default,,0000,0000,0000,,Bem, este método retorna um 'NodeList'\Nque é bem parecido também,
Dialogue: 0,0:02:06.71,0:02:12.53,Default,,0000,0000,0000,,nele podemos usar colchetes, podemos \Nchecar seu tamanho, tudo isto.
Dialogue: 0,0:02:12.53,0:02:16.28,Default,,0000,0000,0000,,E você provavelmente não irá ver\Ndiferenças entre
Dialogue: 0,0:02:16.28,0:02:20.03,Default,,0000,0000,0000,,um NodeList e um HTMLCollection\Nquando você usa estes métodos.
Dialogue: 0,0:02:20.03,0:02:24.38,Default,,0000,0000,0000,,Mas você é convidado a pesquisar sobre\Neles se quiser aprender mais.
Dialogue: 0,0:02:24.38,0:02:28.92,Default,,0000,0000,0000,,Ok, agora, tem também um método\Nque irá olhar seletores CSS,
Dialogue: 0,0:02:28.92,0:02:32.78,Default,,0000,0000,0000,,e retornará apenas um elemento,\Nse você souber seu seletor CSS
Dialogue: 0,0:02:32.78,0:02:35.06,Default,,0000,0000,0000,,ele seleciona apenas uma coisa.
Dialogue: 0,0:02:35.06,0:02:37.41,Default,,0000,0000,0000,,Na prática, não é muito útil,
Dialogue: 0,0:02:37.41,0:02:40.46,Default,,0000,0000,0000,,porque nós temos o id que você\Npode usar nestes casos.
Dialogue: 0,0:02:40.46,0:02:43.08,Default,,0000,0000,0000,,Mas eu vou lhe mostrar ainda assim.
Dialogue: 0,0:02:43.08,0:02:46.31,Default,,0000,0000,0000,,Então aqui, ao invés de 'getElementById',\NEu posso dizer:
Dialogue: 0,0:02:46.31,0:02:48.58,Default,,0000,0000,0000,,'document.querySelector("'
Dialogue: 0,0:02:48.58,0:02:53.56,Default,,0000,0000,0000,,e para encontrar o elemento pelo id\Neu simplestemente adiciono um um sustenido
Dialogue: 0,0:02:53.56,0:02:54.52,Default,,0000,0000,0000,,Ta-da
Dialogue: 0,0:02:54.52,0:02:57.92,Default,,0000,0000,0000,,Então, como você vê, é parecido\Ncom 'querySelectorAll()',
Dialogue: 0,0:02:57.92,0:03:01.55,Default,,0000,0000,0000,,exceto que nós selecionamos um, \Nentão é só 'querySelector()',
Dialogue: 0,0:03:01.55,0:03:06.51,Default,,0000,0000,0000,,e nós passamos alguns seletores\Nque esperamos trazer um elemento.
Dialogue: 0,0:03:06.51,0:03:10.43,Default,,0000,0000,0000,,Então quando você deve usar\Ncada uma destas ferramentas na sua caixa?
Dialogue: 0,0:03:10.43,0:03:13.70,Default,,0000,0000,0000,,As primeiras que lhe mostrei\Ntendem a ter melhor performance.
Dialogue: 0,0:03:13.70,0:03:15.73,Default,,0000,0000,0000,,Então eu sugiro usá-las onde puder.
Dialogue: 0,0:03:15.73,0:03:19.59,Default,,0000,0000,0000,,Mas se você estiver numa situação\Nque necessite de um seletor mais complexo,
Dialogue: 0,0:03:19.59,0:03:24.05,Default,,0000,0000,0000,,e você não puder usar eles,\Nentão 'querySelectorAll()' é seu amigo.
Dialogue: 0,0:03:24.05,0:03:26.11,Default,,0000,0000,0000,,Tente o próximo desafio,
Dialogue: 0,0:03:26.11,0:03:28.57,Default,,0000,0000,0000,,então prepare-se para ver formas e mais \Nformas de manipular esta página web.
Dialogue: 0,0:03:29.00,0:03:33.00,Default,,0000,0000,0000,,Legendado por Francis Pires