5.1 document.getElementById()
Wie Sie wissen, wurde JavaScript entwickelt, um HTML-Seiten Animationen hinzuzufügen. Bisher haben wir noch nicht viel darüber gesagt. Wie füge ich dieselbe Animation hinzu? Wie ändert man beispielsweise die Farbe eines Elements?
Um die Farbe eines Elements zu ändern, müssen Sie zunächst dieses Element finden. Dazu gibt es eine Funktion, document.getElementById();die Sie in Ihrem HTML idan das gewünschte Element schreiben und dann über JavaScript darauf zugreifen. Beispiel:
<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>
Nachdem der Benutzer auf das Bild geklickt hat, wird die Funktion aufgerufen changeImge(). Darin erhalten wir das Element imageanhand seines IDund ändern dann den Wert seines src-Attributs in einen neuen. Dadurch imglädt das Element ein neues Bild.
5.2 document.createElement()
Wir können nicht nur ein Element abrufen, sondern auch neue Elemente erstellen und vorhandene löschen.
Das Erstellen von Elementen ist sehr einfach. Dazu müssen Sie zwei Dinge tun: a) ein Element erstellen und b) es an der richtigen Stelle im Dokument hinzufügen . Normalerweise sieht es so aus:
<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
Eine weitere sehr nützliche Methode ist die window.navigate(). Damit können Sie den Browser zwingen, eine neue Seite anstelle der aktuellen zu laden. Übergeben Sie es einfach URLan diese Methode und rufen Sie sie auf. Beispiel:
<body>
<img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>
Im obigen Beispiel wird die Seite google.com in den aktuellen Tab geladen, nachdem der Nutzer auf das Bild geklickt hat.
5.4 Aktuelle URL
Und noch eine nützliche Sache. Manchmal muss ein Skript die aktuelle Seiten-URL kennen. Beispielsweise kann das gleiche Skript auf verschiedenen Seiten hinzugefügt werden. Wie kann man das machen?
Hierfür gibt es eine besondere Eigenschaft.document.location.href
var currentURL = document.location.href;
GO TO FULL VERSION