0:00:01.593,0:00:05.875
Tenho essa página chamada "Tudo sobre [br]cachorros", que é ótima, mas

0:00:05.875,0:00:13.021
eu sei que nem todos vão concordar [br]comigo, eu gosto mais de gatos,

0:00:13.021,0:00:17.259
e eu gostaria de transformar nisso [br]na página "Tudo sobre gatos".

0:00:17.259,0:00:23.134
Vou utilizar o JavaScript para fazer [br]isso em vez de modificar o HTML,

0:00:23.243,0:00:27.977
para que talvez, eu possa tornar isso [br]em uma extensão do navegador

0:00:28.322,0:00:31.900
para transformar qualquer [br]página sobre gatos.

0:00:32.081,0:00:36.421
Isso não seria maravilhoso, [br]toda a internet sobre gatos?

0:00:37.100,0:00:44.775
Agora, a página tem um título, um [br]parágrafo, e um par de imagens.

0:00:44.974,0:00:49.741
Nós iremos mudar uma parte [br]por vez, começando com o título,

0:00:49.913,0:00:53.394
utilizando dois passos [br]que acabamos de aprender.

0:00:53.542,0:00:58.727
O primeiro passo é o de encontrar [br]o nó DOM contendo esse título.

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

0:01:06.561,0:01:12.047
mas agora eu quero algo muito mais [br]específico, eu quero apenas esse h1.

0:01:12.141,0:01:14.764
Bem, esse h1 possui um ID,

0:01:14.764,0:01:19.083
o que significa que deve ser o único a [br]possuir essa marcação de ID na página,

0:01:19.293,0:01:24.410
e existe uma maneira realmente fácil de [br]encontrar os nós DOM que possuem um ID,

0:01:24.550,0:01:29.888
um método no objeto <i>document</i>[br]chamado "getElementByld".

0:01:30.056,0:01:32.965
Vamos utilizar isso aqui em [br]baixo na tag ,

0:01:32.985,0:01:37.936
primeiro declarando a variável [br]para armazenar em "var headingEl".

0:01:38.156,0:01:42.178
Eu gosto de terminar o nome das [br]minhas variáveis com El ou Node,

0:01:42.178,0:01:44.823
para saber que eles estão armazenando[br]um elemento,

0:01:44.823,0:01:47.202
o qual nós também chamamos de nó.

0:01:47.262,0:01:49.382
Agora, nós utilizamos um método.

0:01:49.382,0:01:52.840
É um método atrelado a um [br]objeto global <i>document</i>,

0:01:52.840,0:01:59.773
então nós escrevemos "document", [br]ponto, e depois "getElementByld",

0:01:59.773,0:02:02.462
e então parenteses [br]porque isto é uma função.

0:02:02.542,0:02:07.470
Isso não vai achar nada desse tipo, [br]pois isso não sabe qual ID irá procurar.

0:02:07.565,0:02:12.092
Dentro dos parênteses precisamos[br]passá-lo a ID que estamos procurando

0:02:12.092,0:02:19.320
como uma frase entre aspas.[br]Como então "heading".

0:02:21.339,0:02:26.611
Como nós sabemos se encontramos o nosso [br]elemento antes de tentarmos manipulá-lo?

0:02:26.611,0:02:30.923
Uma maneira é utilizando [br]a função <i>console.log</i>

0:02:31.487,0:02:35.997
Agora, você pode pausar, e abrir [br]as ferramentas de desenvolvedor.

0:02:35.997,0:02:40.621
Experimente o atalho de teclado[br]Command+Option+i no Mac,

0:02:40.621,0:02:46.917
ou Control+Shift+i no Windows.[br]Uma delas funciona normalmente.

0:02:46.917,0:02:54.690
Você viu o h1 desconectado em seu[br]console? Se sim, isso significa que

0:02:54.690,0:02:56.742
o primeiro passo está completo.

0:02:56.742,0:03:00.040
Nós encontramos o elemento e [br]o armazenamos em uma variável.

0:03:00.040,0:03:04.710
Para o segundo passo, [br]vamos manipular elementos

0:03:04.710,0:03:06.554
utilizando o meios os quais já sabemos

0:03:06.554,0:03:10.812
mudando o interior do HTML. Vamos ver, [br]então isso significa que iremos dizer

0:03:10.812,0:03:17.520
"headingEl.innerHTML=". [br]O momento da verdade...

0:03:17.520,0:03:22.531
"All about cats". [br]Aqui vamos nós.

0:03:22.531,0:03:26.567
Nós começamos.[br]A gatificação começou!

0:03:26.567,0:03:30.694
Agora, você irá tentar fazer [br]algo desse tipo no desafio.

0:03:30.694,0:03:32.388
Traduzido por [Gabriel Mello Fernandes][br]Revisado por [Paulo Trentin]