-
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]
