WEBVTT

00:00:01.593 --> 00:00:05.875
Tenho essa página chamada "Tudo sobre 
cachorros", que é ótima, mas

00:00:05.875 --> 00:00:13.021
eu sei que nem todos vão concordar 
comigo, eu gosto mais de gatos,

00:00:13.021 --> 00:00:17.259
e eu gostaria de transformar nisso 
na página "Tudo sobre gatos".

00:00:17.259 --> 00:00:23.134
Vou utilizar o JavaScript para fazer 
isso em vez de modificar o HTML,

00:00:23.243 --> 00:00:27.977
para que talvez, eu possa tornar isso 
em uma extensão do navegador

00:00:28.322 --> 00:00:31.900
para transformar qualquer 
página sobre gatos.

00:00:32.081 --> 00:00:36.421
Isso não seria maravilhoso, 
toda a internet sobre gatos?

00:00:37.100 --> 00:00:44.775
Agora, a página tem um título, um 
parágrafo, e um par de imagens.

00:00:44.974 --> 00:00:49.741
Nós iremos mudar uma parte 
por vez, começando com o título,

00:00:49.913 --> 00:00:53.394
utilizando dois passos 
que acabamos de aprender.

00:00:53.542 --> 00:00:58.727
O primeiro passo é o de encontrar 
o nó DOM contendo esse título.

00:00:59.266 --> 00:01:06.421
A maneira que nós achamos o 
nó DOM antes era apenas <i>document.body</i>,

00:01:06.561 --> 00:01:12.047
mas agora eu quero algo muito mais 
específico, eu quero apenas esse h1.

00:01:12.141 --> 00:01:14.764
Bem, esse h1 possui um ID,

00:01:14.764 --> 00:01:19.083
o que significa que deve ser o único a 
possuir essa marcação de ID na página,

00:01:19.293 --> 00:01:24.410
e existe uma maneira realmente fácil de 
encontrar os nós DOM que possuem um ID,

00:01:24.550 --> 00:01:29.888
um método no objeto <i>document</i>
chamado "getElementByld".

00:01:30.056 --> 00:01:32.965
Vamos utilizar isso aqui em 
baixo na tag ,

00:01:32.985 --> 00:01:37.936
primeiro declarando a variável 
para armazenar em "var headingEl".

00:01:38.156 --> 00:01:42.178
Eu gosto de terminar o nome das 
minhas variáveis com El ou Node,

00:01:42.178 --> 00:01:44.823
para saber que eles estão armazenando
um elemento,

00:01:44.823 --> 00:01:47.202
o qual nós também chamamos de nó.

00:01:47.262 --> 00:01:49.382
Agora, nós utilizamos um método.

00:01:49.382 --> 00:01:52.840
É um método atrelado a um 
objeto global <i>document</i>,

00:01:52.840 --> 00:01:59.773
então nós escrevemos "document", 
ponto, e depois "getElementByld",

00:01:59.773 --> 00:02:02.462
e então parenteses 
porque isto é uma função.

00:02:02.542 --> 00:02:07.470
Isso não vai achar nada desse tipo, 
pois isso não sabe qual ID irá procurar.

00:02:07.565 --> 00:02:12.092
Dentro dos parênteses precisamos
passá-lo a ID que estamos procurando

00:02:12.092 --> 00:02:19.320
como uma frase entre aspas.
Como então "heading".

00:02:21.339 --> 00:02:26.611
Como nós sabemos se encontramos o nosso 
elemento antes de tentarmos manipulá-lo?

00:02:26.611 --> 00:02:30.923
Uma maneira é utilizando 
a função <i>console.log</i>

00:02:31.487 --> 00:02:35.997
Agora, você pode pausar, e abrir 
as ferramentas de desenvolvedor.

00:02:35.997 --> 00:02:40.621
Experimente o atalho de teclado
Command+Option+i no Mac,

00:02:40.621 --> 00:02:46.917
ou Control+Shift+i no Windows.
Uma delas funciona normalmente.

00:02:46.917 --> 00:02:54.690
Você viu o h1 desconectado em seu
console? Se sim, isso significa que

00:02:54.690 --> 00:02:56.742
o primeiro passo está completo.

00:02:56.742 --> 00:03:00.040
Nós encontramos o elemento e 
o armazenamos em uma variável.

00:03:00.040 --> 00:03:04.710
Para o segundo passo, 
vamos manipular elementos

00:03:04.710 --> 00:03:06.554
utilizando o meios os quais já sabemos

00:03:06.554 --> 00:03:10.812
mudando o interior do HTML. Vamos ver, 
então isso significa que iremos dizer

00:03:10.812 --> 00:03:17.520
"headingEl.innerHTML=". 
O momento da verdade...

00:03:17.520 --> 00:03:22.531
"All about cats". 
Aqui vamos nós.

00:03:22.531 --> 00:03:26.567
Nós começamos.
A gatificação começou!

00:03:26.567 --> 00:03:30.694
Agora, você irá tentar fazer 
algo desse tipo no desafio.

00:03:30.694 --> 00:03:32.388
Traduzido por [Gabriel Mello Fernandes]
Revisado por [Paulo Trentin]