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:
<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;
GO TO FULL VERSION