Table des matières:
- getElementById
- getElementsByTagName
- ce texte disparaîtra
- cela sera écrasé
- JavaScript effacera ce
- getElementsByClassName
Vidéo: TUTO JS - #9 RÉCUPÉRER DES ÉLÉMENTS HTML 2025
En JavaScript, les méthodes getElementBy facilitent l'accès à tout élément ou groupe d'éléments dans un document sans dépendre des relations parent / enfant des nœuds. Les trois moyens les plus couramment utilisés pour accéder aux éléments sont
-
getElementById
-
getElementsByTagName
-
getElementsByClassName
getElementById
De loin la méthode la plus utilisée pour sélectionner des éléments, getElementById est essentiel au développement web moderne. Avec ce petit outil pratique, vous pouvez trouver et travailler avec n'importe quel élément simplement en référençant un attribut id unique. Quoi qu'il se passe d'autre dans le document HTML, getElementById sera toujours là pour vous et sélectionnera de manière fiable l'élément que vous voulez.
Cet exemple démontre la puissance impressionnante de getElementById pour vous permettre de conserver tout votre JavaScript dans votre document ou de modulariser votre code. En utilisant getElementById, vous pouvez travailler avec n'importe quel élément, n'importe où dans votre document, aussi longtemps que vous connaissez son identifiant.
Utilisation de la fonction getElementById calculateMPG (miles, gallons) {document. getElementById ("displayMiles"). innerHTML = parseInt (miles); document. getElementById ("displayGallons"). innerHTML = parseInt (gallons); document. getElementById ("displayMPG"). innerHTML = miles / gallons;}
Vous avez conduit ___
miles.
Vous avez utilisé ___
gallons de gaz.
Votre MPG est ___. var milesDriven = prompt ("Entrer miles conduit"); var gallonsGas = prompt ("Entrez les gallons de gaz utilisés"); calculerMPG (milesDriven, gallonsGas);
getElementsByTagName
La méthode getElementsByTagName renvoie une liste de noeuds de tous les éléments avec le nom de tag spécifié. Par exemple, getElementsByTagName est utilisé pour sélectionner tous les éléments h1 et modifier leurs propriétés innerHTML en nombres séquentiels.
Utilisation de la fonction getElementsByTagName numberElements (tagName) {var getTags =
document. getElementsByTagName (tagName); pour (i = 0; i
ce texte disparaîtra
cela sera écrasé
JavaScript effacera ce
numberElements ("h1");
getElementsByClassName
La méthode getElementsByClassName fonctionne à peu près de la même manière que getElementsByTagName, mais utilise les valeurs de l'attribut class pour sélectionner les éléments. Cette fonction sélectionne les éléments avec une classe d'erreur et changera la valeur de leur propriété innerHTML.
Utilisation de la fonction getElementsByClassName checkMath (résultat) {var userMath =
document. getElementById ("answer1"). valeur; var errors =
document. getElementsByClassName ("erreur"); if (parseInt (userMath)! = parseInt (résultat)) {erreurs [0]. innerHTML = "C'est faux. Vous avez entré "+ userMath +". La réponse est "+ result;} else {errors [0]. innerHTML = "Correct! ";}} 4 + 1 = Vérifiez vos maths!(suite)
Le résultat de l'exécution de ce code dans un navigateur Web et de la saisie d'une mauvaise réponse est affiché ici.
Notez que le code ci-dessus utilise un attribut onclick dans l'élément button. Ceci est un exemple d'attribut de gestionnaire d'événement DOM.
