Publicado em por MundoJS

JavaScript Básico 11: Manipulando o DOM (Escrita)


Código do Vídeo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <p id="paragrafo">teste 123</p>
   
    <ul>
        <li>Item 0</li>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <button>Clique Aqui</button>

    <script>
        //Alterando Texto
        let tagP = document.getElementById("paragrafo");
        //tagP.innerText = "Olá Mundo";
        
        //Alterando Estilo
        let listaTagsLi = document.getElementsByTagName("li");
        
        // listaTagsLi[0].style.color = "blue";
        // listaTagsLi[1].style.backgroundColor = "yellow";
        // listaTagsLi[2].style.fontSize = "20px";

    </script>

</body>
</html>

Alterando o Texto

Alterar o texto que está dentro de uma tag é uma tarefa bem simples. Basta capturar o elemento e atribuir o valor desejado a propriedade innerText dele.

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

    <script>
        //alterando em uma linha
        document.getElementById("paragrafo").innerText = "Primeiro Paragrafo"

        //Colocando em uma variavel
        let tagP = document.getElementById("paragrafo");
        tagP.innerText = "Segundo Paragrafo";
    </script>

</body>
</html>

 

Alterando o HTML dentro da Tag

Alterar o HTML da Tag/Elemento funciona da mesma forma que o innerText. A diferença está na funcionalidade, com o innerHTML, se você adicionar novas tags dentro da string, o navegador as renderizará de acordo com a funcionalidade de cada uma.

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

    <script>
        //alterando em uma linha
        document.getElementById("paragrafo").innerHTML = "Primeiro <strong>Paragrafo</strong> com <em>HTML</em>";

        //Colocando em uma variavel
        let tagP = document.getElementById("paragrafo");
        tagP.innerText = "Segundo <strong>Paragrafo</strong><br/>Terceiro Paragrafo";
    </script>

</body>
</html>

 

Qual devo usar?

Existe uma pequena diferença de performance, mas não é o suficiente para ser um problema em 99,99% das vezes. Se você usar o innerHMTL terá mais flexibilidade e performance, mas ao custo de possiveis injeções de cross-site script. Por isso é sempre interessante avaliar o nível de segurança que seu site ou aplicação precisam ter e aplciar a melhor técnica possível.

 

Alterando o Style/CSS dos Elementos

Através do objeto style contido em cada elemento é possível fazer diversas alterações no layout das tag que você está capturando. Com isso, será possível criar um site dinâmico e intuitivo.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
  
    <ul>
        <li>Item 0</li>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script>

        let listaTagsLi = document.getElementsByTagName("li");
        
        //altera a cor do texto para azul e centraliza
        listaTagsLi[0].style.color = "blue";
        listaTagsLi[0].style.textAlign = "center";

        //altera a cor de fundo para amarelo e da uma borda de 1px na cor preta
        listaTagsLi[1].style.backgroundColor = "yellow";
        listaTagsLi[1].style.border = "1px solid black";
        
        //altera a fonte para 25px e adiciona 10px de margem em  todos os lados
        listaTagsLi[2].style.fontSize = "25px";
        listaTagsLi[2].style.margin = "10px";

        //deixa o texto negritado
        listaTagsLi[3].style.fontWeight = "800";
    </script>
</body>
</html>

 

Exercícios

  1. Cria uma página HTML com uma tag <p>Olá Mundo</p> dentro dela. Após tudo estar pronto execute os seguintes comandos usando apenas JavaScript
    1. Capture a tag <p> e :
      1. Troque a frase por “Olá MundoJS“. Note que o MundoJS será negritado com a tag strong.
      2. Centralize o texto da tag p.
      3. Troque a cor dor texto para um tom de verde.
      4. Adicione uma borda de 1px nela.
    2. Capture a tag strong que você criou (deve ser a única da página) e:
      1. Troque a cor dela para azul.
      2. Deixe o texto sublinhado (se você não conhece CSS, precisará dar uma pesquisada).

 

Deixe um comentário