Publicado em por MundoJS

JavaScript Básico 10: Manipulando o DOM (Leitura)


Código do Vídeo (com comentários):

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
</head>

<body>
    <p id="lorem">Lorem Ipsum Dolor</p>
    <p id="nums" class="tete">123</p>
    <p id="hakuna" class="tete">Hakuna Matata</p>

    <script>
        //retorna 1 elemento com base no ID
        let elemento = document.getElementById("lorem");
        console.log(elemento);

        // let elemento = document.getElementById("lorem").innerHTML;
        // console.log(elemento);

        //retorna uma lista com base na classe
        let elementosclasse = document.getElementsByClassName("tete");
        console.log(elementosclasse);
        // Exibe o conteudo do primeiro elemento
        // console.log(elementosclasse[0].innerHTML);

        //retorna uma lista com base na Tag
        let elementosTag = document.getElementsByTagName("p");
        console.log(elementosTag);
    </script>
    
</body>

</html>

Então posso capturar qualquer elemento desta forma?

Sim, lembrando sempre dos detalhes mencionados acima.

  • ID: É único e retornará apenas 1 elemento.
    • Nota: Você pode colocar o mesmo id em várias tag, mas esse não é o propósito dele. Utilize classes ou outros atributos para isso
  • Classe: Retorna uma lista com todas as tags (podendo conter <p>, <div>, <span> e muito mais entre elas) que possuem aquela classe
  • Tag: Todas as tags com a assinatura que você passar por parametro na função (agora já sabemos o que é parametro e função 🙂 ).

 

Esses são os únicos formatos para obtermos informações da tela?

Nem de perto, mas na minha opinião eles são os mais simples de se aprender e utilizar. Mais para frente veremos outras formas de obter dados e formas alternativas

 

Por que não aparece o texto dentro da tag se não colocar innerHTML?

Simples, o que você está capturando é o objeto (ou uma lista de objetos) que representam a tag <p>, <span> ou qualquer outra que nem precisa ter um innerHTML ou texto. Ainda pode ser um pouco confuso, mas se você fizer um console.log no objeto, verá todas as propriedades deles e acredite, os programadores front end precisaram acessar várias delas.

 

Qual a diferença de innerText e innerHTML?

ambos tem funcionalidades parecidas, no entanto é importante saber que o innerText retornará o conteudo dentro da tag formatado como apenas texto. Enquanto o innerHTML retornará uma string com qualquer outra tag e formatação que possa existir dentro do elemento que você está vendo. Veja o exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <p id="paragrafo">123 <span>teste</span> 123 <strong>Negrito</strong> 123</p>

    <script>
    let parag = document.getElementById("paragrafo");
    //exibirá 123 teste 123 Negrito 123
    console.log(parag.innerText);

    //exibirá 123 <span>teste</span> 123 <strong>Negrito</strong> 123
    console.log(parag.innerHTML);
    </script>
</body>
</html>

Como você pode ver, cada item tem sua utilidade, seja exibindo texto puro ou todo o conteúdo interno da tag

Exercícios

Para fazer os exercícios, copie o código abaixo no seu editor de texto ou IDE

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <p id="paragrafo">123 <span>teste</span> 123 <span>Lorem <strong>negrito<strong></span> 123</p>
    <ul>
        <li>111</li>
        <li>222</li>
        <li id="item">333</li>
        <li>444</li>
        <li>555</li>
        <li>666</li>
        <li>777</li>
        <li>888</li>
    </ul>
</body>
</html>
  1. Exiba apenas o texto da tag com id=paragrafo (sem tags).
  2. Exiba em tela o conteudo dentro das tags <span>.
  3. obtenha o elemento li com o texto 666 dentro dele e exiba esse valor
  4. Crie uma função chamada exibirInnerHTML que receberá 1 parametro (um elemento) e dentro da função escreverá o innerHTML no console. Repita essa ação para as tags <p>, <strong>, e <li> com id=item.

2 respostas para “JavaScript Básico 10: Manipulando o DOM (Leitura)”

Deixe um comentário