5.1 document.getElementById()
Zoals u weet, is JavaScript gemaakt om wat animatie toe te voegen aan HTML-pagina's. Tot nu toe hebben we er nog niet veel over gezegd. Hoe voeg je dezelfde animatie toe? Hoe verander je bijvoorbeeld de kleur van een element?
Om de kleur van een element te veranderen, moet je eerst dit element vinden. Om dit te doen, is er een functie. document.getElementById();U schrijft in uw HTML idop het gewenste element en opent het vervolgens vanuit JavaScript. Voorbeeld:
<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>
Nadat de gebruiker op de afbeelding heeft geklikt, wordt de functie aangeroepen changeImge(). Daarin krijgen we het element imagedoor zijn ID, en veranderen dan de waarde van zijn src attribuut in een nieuwe. Waardoor het element imgeen nieuwe afbeelding laadt.
5.2 document.createElement()
Naast het verkrijgen van een element, kunnen we ook nieuwe elementen maken en bestaande verwijderen.
Elementen maken is heel eenvoudig. Om dit te doen, moet u twee dingen doen: a) maak een element , b) voeg het toe aan de juiste plaats in het document. Het ziet er meestal zo uit:
<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 window.navigate() methode
Een andere zeer handige methode is de window.navigate(). Hiermee kunt u de browser dwingen een nieuwe pagina te laden in plaats van de huidige. Geef het gewoon door URLaan deze methode en noem het. Voorbeeld:
<body>
<img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>
In het bovenstaande voorbeeld wordt, nadat de gebruiker op de afbeelding heeft geklikt, de pagina google.com in het huidige tabblad geladen.
5.4 Huidige URL
En nog een handig ding. Soms moet een script de huidige pagina-URL weten. Hetzelfde script kan bijvoorbeeld aan verschillende pagina's worden toegevoegd. Hoe je dat doet?
Hiervoor is een speciale eigenschap.document.location.href
var currentURL = document.location.href;
GO TO FULL VERSION