Publicado em por MundoJS

Exercício fácil: DOM – Leitura

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!

Deixe um comentário