Neste exercício, armazenaremos elementos HTML em variáveis JavaScript! Para fazer isso, você pode usar o document.getElementById(), document.querySelector(), entre outros.
Exercício:
Crie as seguintes variáveis:
– titulo : conterá a primeira tag h1;
– descricao : conterá a tag com id = descricao;
– listaItens : conterá todas as tags com classe = itens;
Utilize o seguinte HTML como base para o seu exercício:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Titulo</h1>
<p>subtítulo</p>
<br/>
<p id="descricao">Uma lista de itens</p>
<br/>
<ul>
<li>Seus itens</li>
<ol>
<li class="itens">Livro</li>
<li class="itens">Caneta</li>
<li class="itens">Telefone</li>
<li class="itens">Carteira</li>
</ol>
<li>Outros Itens</li>
<ol>
<li>N/A</li>
</ol>
</ul>
</body>
</html>
Dicas importantes:
- Use a conotação (“.elemento”) para capturar por classe;
- Use a conotação (“#elemento”) para capturar por ID;
- Crie suas variáveis em um arquivo scripts.js;
- Chame o seu arquivos scripts.js no seu arquivo index.html.
Confira o seu resultado:
let titulo = document.querySelector("h1");
let descricao = document.querySelector("#descricao");
let listaItens = document.querySelectorAll(".itens");
Gostou deste exercício? Teve dificuldade? Realizou de maneira diferente? Comente abaixo!
