5.1 document.getElementById()
Comme vous le savez, JavaScript a été créé pour ajouter de l'animation aux pages HTML. Jusqu'à présent, nous n'en avons pas beaucoup parlé. Comment ajouter cette même animation ? Comment, par exemple, changer la couleur d'un élément ?
Pour changer la couleur d'un élément, vous devez d'abord trouver cet élément. Pour ce faire, il existe une fonction document.getElementById();Vous écrivez dans votre HTML idà l'élément souhaité, puis y accédez depuis JavaScript. Exemple:
<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>Une fois que l'utilisateur a cliqué sur l'image, la fonction est appelée changeImge(). À l'intérieur, nous obtenons l'élément imagepar son ID, puis changeons la valeur de son attribut src en un nouveau. Ce qui entraînera imgle chargement d'une nouvelle image par l'élément.
5.2 document.createElement()
En plus d'obtenir un élément, nous pouvons également créer de nouveaux éléments et supprimer ceux qui existent déjà.
Créer des éléments est très facile. Pour ce faire, vous devez faire deux choses : a) créer un élément , b) l'ajouter au bon endroit dans le document. Il ressemble généralement à ceci :
<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éthode window.navigate()
Une autre méthode très utile est le window.navigate(). Avec lui, vous pouvez forcer le navigateur à charger une nouvelle page au lieu de la page actuelle. Passez-le simplement URLà cette méthode et appelez-le. Exemple:
<body>
<img scr="big-image.png" onclick="window.navigate('https://google.com');">
</body>Dans l'exemple ci-dessus, après que l'utilisateur a cliqué sur l'image, la page google.com sera chargée dans l'onglet actuel.
5.4 URL actuelle
Et encore une chose utile. Parfois, un script a besoin de connaître l'URL de la page actuelle. Par exemple, le même script peut être ajouté à différentes pages. Comment faire?
Il y a une propriété spéciale pour cela.document.location.href
var currentURL = document.location.href;