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 document.body,
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 document 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 document,
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 console.log
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]