< Return to Video

Encontrando elementos por ID (verão vídeo)

  • 0:02 - 0:06
    Tenho essa página chamada "Tudo sobre
    cachorros", que é ótima, mas
  • 0:06 - 0:13
    eu sei que nem todos vão concordar
    comigo, eu gosto mais de gatos,
  • 0:13 - 0:17
    e eu gostaria de transformar nisso
    na página "Tudo sobre gatos".
  • 0:17 - 0:23
    Vou utilizar o JavaScript para fazer
    isso em vez de modificar o HTML,
  • 0:23 - 0:28
    para que talvez, eu possa tornar isso
    em uma extensão do navegador
  • 0:28 - 0:32
    para transformar qualquer
    página sobre gatos.
  • 0:32 - 0:36
    Isso não seria maravilhoso,
    toda a internet sobre gatos?
  • 0:37 - 0:45
    Agora, a página tem um título, um
    parágrafo, e um par de imagens.
  • 0:45 - 0:50
    Nós iremos mudar uma parte
    por vez, começando com o título,
  • 0:50 - 0:53
    utilizando dois passos
    que acabamos de aprender.
  • 0:54 - 0:59
    O primeiro passo é o de encontrar
    o nó DOM contendo esse título.
  • 0:59 - 1:06
    A maneira que nós achamos o
    nó DOM antes era apenas document.body,
  • 1:07 - 1:12
    mas agora eu quero algo muito mais
    específico, eu quero apenas esse h1.
  • 1:12 - 1:15
    Bem, esse h1 possui um ID,
  • 1:15 - 1:19
    o que significa que deve ser o único a
    possuir essa marcação de ID na página,
  • 1:19 - 1:24
    e existe uma maneira realmente fácil de
    encontrar os nós DOM que possuem um ID,
  • 1:25 - 1:30
    um método no objeto document
    chamado "getElementByld".
  • 1:30 - 1:33
    Vamos utilizar isso aqui em
    baixo na tag ,
  • 1:33 - 1:38
    primeiro declarando a variável
    para armazenar em "var headingEl".
  • 1:38 - 1:42
    Eu gosto de terminar o nome das
    minhas variáveis com El ou Node,
  • 1:42 - 1:45
    para saber que eles estão armazenando
    um elemento,
  • 1:45 - 1:47
    o qual nós também chamamos de nó.
  • 1:47 - 1:49
    Agora, nós utilizamos um método.
  • 1:49 - 1:53
    É um método atrelado a um
    objeto global document,
  • 1:53 - 2:00
    então nós escrevemos "document",
    ponto, e depois "getElementByld",
  • 2:00 - 2:02
    e então parenteses
    porque isto é uma função.
  • 2:03 - 2:07
    Isso não vai achar nada desse tipo,
    pois isso não sabe qual ID irá procurar.
  • 2:08 - 2:12
    Dentro dos parênteses precisamos
    passá-lo a ID que estamos procurando
  • 2:12 - 2:19
    como uma frase entre aspas.
    Como então "heading".
  • 2:21 - 2:27
    Como nós sabemos se encontramos o nosso
    elemento antes de tentarmos manipulá-lo?
  • 2:27 - 2:31
    Uma maneira é utilizando
    a função console.log
  • 2:31 - 2:36
    Agora, você pode pausar, e abrir
    as ferramentas de desenvolvedor.
  • 2:36 - 2:41
    Experimente o atalho de teclado
    Command+Option+i no Mac,
  • 2:41 - 2:47
    ou Control+Shift+i no Windows.
    Uma delas funciona normalmente.
  • 2:47 - 2:55
    Você viu o h1 desconectado em seu
    console? Se sim, isso significa que
  • 2:55 - 2:57
    o primeiro passo está completo.
  • 2:57 - 3:00
    Nós encontramos o elemento e
    o armazenamos em uma variável.
  • 3:00 - 3:05
    Para o segundo passo,
    vamos manipular elementos
  • 3:05 - 3:07
    utilizando o meios os quais já sabemos
  • 3:07 - 3:11
    mudando o interior do HTML. Vamos ver,
    então isso significa que iremos dizer
  • 3:11 - 3:18
    "headingEl.innerHTML=".
    O momento da verdade...
  • 3:18 - 3:23
    "All about cats".
    Aqui vamos nós.
  • 3:23 - 3:27
    Nós começamos.
    A gatificação começou!
  • 3:27 - 3:31
    Agora, você irá tentar fazer
    algo desse tipo no desafio.
  • 3:31 - 3:32
    Traduzido por [Gabriel Mello Fernandes]
    Revisado por [Paulo Trentin]
Title:
Encontrando elementos por ID (verão vídeo)
Description:

more » « less
Video Language:
English
Duration:
03:33

Portuguese, Brazilian subtitles

Revisions