Tenho essa página chamada "Tudo sobre 
cachorros", que é ótima, mas

eu sei que nem todos vão concordar 
comigo, eu gosto mais de gatos,

e eu gostaria de transformar nisso 
na página "Tudo sobre gatos".

Vou utilizar o JavaScript para fazer 
isso em vez de modificar o HTML,

para que talvez, eu possa tornar isso 
em uma extensão do navegador

para transformar qualquer 
página sobre gatos.

Isso não seria maravilhoso, 
toda a internet sobre gatos?

Agora, a página tem um título, um 
parágrafo, e um par de imagens.

Nós iremos mudar uma parte 
por vez, começando com o título,

utilizando dois passos 
que acabamos de aprender.

O primeiro passo é o de encontrar 
o nó DOM contendo esse título.

A maneira que nós achamos o 
nó DOM antes era apenas <i>document.body</i>,

mas agora eu quero algo muito mais 
específico, eu quero apenas esse h1.

Bem, esse h1 possui um ID,

o que significa que deve ser o único a 
possuir essa marcação de ID na página,

e existe uma maneira realmente fácil de 
encontrar os nós DOM que possuem um ID,

um método no objeto <i>document</i>
chamado "getElementByld".

Vamos utilizar isso aqui em 
baixo na tag ,

primeiro declarando a variável 
para armazenar em "var headingEl".

Eu gosto de terminar o nome das 
minhas variáveis com El ou Node,

para saber que eles estão armazenando
um elemento,

o qual nós também chamamos de nó.

Agora, nós utilizamos um método.

É um método atrelado a um 
objeto global <i>document</i>,

então nós escrevemos "document", 
ponto, e depois "getElementByld",

e então parenteses 
porque isto é uma função.

Isso não vai achar nada desse tipo, 
pois isso não sabe qual ID irá procurar.

Dentro dos parênteses precisamos
passá-lo a ID que estamos procurando

como uma frase entre aspas.
Como então "heading".

Como nós sabemos se encontramos o nosso 
elemento antes de tentarmos manipulá-lo?

Uma maneira é utilizando 
a função <i>console.log</i>

Agora, você pode pausar, e abrir 
as ferramentas de desenvolvedor.

Experimente o atalho de teclado
Command+Option+i no Mac,

ou Control+Shift+i no Windows.
Uma delas funciona normalmente.

Você viu o h1 desconectado em seu
console? Se sim, isso significa que

o primeiro passo está completo.

Nós encontramos o elemento e 
o armazenamos em uma variável.

Para o segundo passo, 
vamos manipular elementos

utilizando o meios os quais já sabemos

mudando o interior do HTML. Vamos ver, 
então isso significa que iremos dizer

"headingEl.innerHTML=". 
O momento da verdade...

"All about cats". 
Aqui vamos nós.

Nós começamos.
A gatificação começou!

Agora, você irá tentar fazer 
algo desse tipo no desafio.

Traduzido por [Gabriel Mello Fernandes]
Revisado por [Paulo Trentin]