Médiaforma

getElementById, Obtenir le contenu d’une div

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, nous allons nous intéresser à une problématique classique : la récupération du contenu d’une balise <div>. Bien entendu, cette opération se fera à l’aide de la fonction JavaScript getElementById().

Examinons le code utilisé. Commençons par la parte HTML, située entre les lignes 21 et 27.

  • La ligne 22 définit la balise <div> div1. L’attribut contenteditable initialisé à true rend cette balise éditable (ceci est une nouveauté bien pratique du langage HTML5). En d’autres termes, son contenu peut être librement modifié par l’utilisateur.
  • Les lignes 23 à 25 mettent en place un formulaire pour héberger le bouton de commande.
  • Le bouton de commande est défini ligne 24. Le texte affiché dans le bouton est défini dans l’attribut value. Lorsque le bouton est cliqué, la fonction JavaScript popup() est exécutée.

La mise en forme de la balise <div> est définie avec quelques lignes de CSS, ente les lignes 5 et 10 :

  • La couleur d’arrière-plan est définie ligne 7 ;
  • La largeur de la division (c’est-à-dire de la balise <div>) est définie ligne 8 ;
  • Enfin, la hauteur de la division est définie ligne 9.

Il ne reste plus qu’à examiner le code JavaScript, défini entre les lignes 12 et 19. La fonction popup() est définie ligne 13. La balise <div> d’identifiant div1 est mémorisée dans l’objet objet1 ligne 15. Quant à la ligne 16, elle affiche le contenu de la balise <div> dans une boîte de message en utilisant la propriété JavaScript innerHTML.

Exécutons ce code dans un navigateur Web. Après avoir modifié le contenu de la balise <div>, nous cliquons sur le bouton de commande. Le contenu de la <div> est bien affiché dans une boîte de message.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

Merci pour le tuto très utile, Merci infiniment pour votre temps.

Leave a Reply