5.1 document.getElementById()

Como você sabe, o JavaScript foi criado para adicionar alguma animação às páginas HTML. Até agora, não falamos muito sobre isso. Como adicionar essa mesma animação? Como, por exemplo, mudar a cor de um elemento?

Para alterar a cor de um elemento, primeiro você precisa encontrar esse elemento. Para fazer isso, existe uma função document.getElementById();Você escreve em seu HTML idno elemento desejado e, em seguida, acessa-o a partir do JavaScript. Exemplo:

Java university 
<head>
    <script>
        function changeImage()
        {
           var image = document.getElementById("image123");
            image.src = "new-image.png";
        }
    </script>
</head>
<body>
    <img id="image123" scr="big-image.png" onclick="changeImage()">
</body>

Após o usuário clicar na imagem, a função é chamada changeImge(). Dentro dele, obtemos o elemento imagepor seu ID, e então alteramos o valor de seu atributo src para um novo. O que fará com que o elemento imgcarregue uma nova imagem.

5.2 document.createElement()

Além de obter um elemento, também podemos criar novos elementos e excluir os existentes.

Criar elementos é muito fácil. Para fazer isso, você precisa fazer duas coisas: a) criar um elemento , b) adicioná-lo ao lugar certo no documento. Geralmente se parece com isso:

<head>
    <script>
        window.onload = function ()   {
            var image = document.createElement("IMG");
            var image.src = "big-image.png";
            document.body.addAfter(image);
        }
    </script>
</head>
<body>
</body>

5.3 método window.navigate()

Outro método muito útil é o window.navigate(). Com ele, você pode forçar o navegador a carregar uma nova página em vez da atual. Basta passá-lo URLpara este método e chamá-lo. Exemplo:

<body>
  <img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>

No exemplo acima, após o usuário clicar na imagem, a página google.com será carregada na aba atual.

5.4 URL atual

E mais uma coisa útil. Às vezes, um script precisa saber o URL da página atual. Por exemplo, o mesmo script pode ser adicionado a diferentes páginas. Como fazer isso?

Existe uma propriedade especial para isso.document.location.href

var currentURL = document.location.href;