Table des matières:
Vidéo: Cours Complet HTML CSS - Tutoriel pour Débutants et Confirmés [Partie 1/3] 2024
En JavaScript, vous pouvez afficher les types de noeud et les valeurs de noeud en utilisant le DOM HTML. Vous pouvez également définir les valeurs de propriété des éléments dans le DOM à l'aide de l'objet Element. Lorsque vous utilisez JavaScript pour définir les propriétés des éléments DOM, les nouvelles valeurs sont reflétées en temps réel dans le document HTML.
Modifier les propriétés des éléments d'un document Web afin de les refléter instantanément dans le navigateur, sans avoir besoin d'actualiser ou de recharger la page Web, est la pierre angulaire de ce qu'on appelait le web 2. 0.
< ! --1 ->innerHTML
La propriété innerHTML est la propriété la plus importante d'un élément que vous pouvez modifier via le DOM.
La propriété innerHTML d'un élément contient tout ce qui se trouve entre les balises de début et de fin de l'élément. Par exemple, dans le code suivant, la propriété innerHTML de l'élément div contient un élément p et son nœud de texte enfant:
Ceci est du texte.
Il est très courant dans la programmation Web de créer des éléments div vides dans votre document HTML, puis d'utiliser la propriété innerHTML pour insérer dynamiquement du code HTML dans les éléments.
Pour récupérer et afficher la valeur de la propriété innerHTML, vous pouvez utiliser le code suivant:
var getTheInner = document. corps. premier enfant. innerHTML; document. write (getTheInner);
Dans le code précédent, la valeur qui sera sortie par le document. La méthode write () est
Ceci est un texte.
La définition de la propriété innerHTML s'effectue de la même manière que vous définissez la propriété de tout objet:
document. corps. premier enfant. innerHTML = "Salut à tous! ";
Le résultat de l'exécution du JavaScript précédent sera que l'élément p et la phrase du texte dans le balisage d'origine seront remplacés par les mots "Salut! "Le document HTML original reste inchangé, mais la représentation DOM et le rendu de la page Web seront mis à jour pour refléter la nouvelle valeur. Étant donné que la représentation DOM du document HTML est ce que le navigateur affiche, l'affichage de votre page Web sera également mis à jour.
Définition des attributs
Pour définir la valeur d'un attribut HTML, vous pouvez utiliser la méthode setAttribute ():
document. corps. premier enfant. innerHTML. setAttribute ("class", "myclass");
Le résultat de l'exécution de cette instruction est que le premier élément enfant de l'élément body recevra un nouvel attribut nommé "class" avec la valeur "myclass".
