Les Manipulations HTML

Récupérer une ou plusieurs balises HTML

Pour interagir avec un ou plusieurs éléments du contenu HTML, on va d'abord les récupérer. le contenu HTML est stocké sur 'document'.

Il y a plusieurs possibilités pour récupérer une balise HTML:

- via son id : getElementById

getElementById est une méthode que l'on associe à 'document' pour aller récupérer une balise qui a un Id en particulier. Exemple :

    
        //Dans le code HTML, j'ai une balise ‹div id='toto'› vide. Je vais la stocker dans une constante
        const toto = document.getElementById('toto');
        //Avec console.log(toto), je peux voir dans la console ‹div id='toto'›‹/div›.
        //J'ai bien récupéré la div dans ma constante toto.

- via sa classe : getElementsByClassName

getElementsByClassName est une méthode que l'on associe à 'document' pour aller récupérer une ou plusieurs balises en particulier. Exemple :

    
        //Dans le code HTML, j'ai deux balises ‹div› vide avec une classe égal à 'tata'. Je vais les stocker dans une constante
        const tata = document.getElementsByClassName('tata');
        //Avec console.log(tata), je peux voir dans la console "HTMLCollection(2)", contenant deux éléments "0: div.tata" et "1: div.tata".
        //On a bien récupéré les deux div dans un tableau.

- via un appel comme en CSS : querySelector

querySelector est une méthode que l'on associe à 'document' pour aller récupérer la première balise trouvée dans la page. Exemple :

    
        //Dans le code HTML, j'ai deux balises ‹div› vide avec une classe égal à 'tata'. Je vais utiliser le querySelector.
        const tata = document.querySelector('.tata');
        //Avec console.log(tata), je peux voir dans la console ‹div id='tata'›‹/div›.
        //On a récupéré la première balise, mais pas la deuxième.

pour récupérer toutes les balises cibliées, on utilisera querySelectorAll. Exemple :

    
        //Dans le code HTML, j'ai deux balises ‹div› vide avec une classe égal à 'tata'. Je vais utiliser le querySelectorAll.
        const tata = document.querySelectorAll('.tata');
        //Avec console.log(tata), je peux voir dans la console je peux voir dans la console "HTMLCollection(2), 
        //comme avec le document.getElementsByClassName('tata'). On a récupéré les deux balises.

sur l'exemple juste au dessus, on voit que j'ai mis en argument ".tata" . Cet argument est le même sélecteur utilisé en CSS pour attribuer du style.

On peut ainsi récupérer toute balise sans avoir à lui attribuer une classe ou un id.

Modifier une balise HTML

Après avoir récupéré une balise, on va pouvoir modifier son contenu. Chaque balise a une grande liste d'attributs modifiables, pouvant être consultés lors de l'affichage dans la console.

Pour accéder à un de ses attributs, on peut y accéder comme un objet.

Par exemple, si on veut accéder à son contenu, on utilisera la propriété "innerHTML".Pour le texte contenu à l'intérieur, on utilisera "textContent",..

Exemple : 

    
        //Dans le code HTML, j'ai une balise ‹p id='toto'› avec en contenu : 'azerty'. Je vais modifier le contenu.
        const p = document.getElementById('toto');
        //Avec console.log(p), je peux voir dans la console que j'ai récupéré la balise.
        //Je vais maintenant modifier son contenu.
        p.textContent = 'le contenu a changé.';
        //Maintenant, quand je regarde l'affichage de ma page, je vois à la place du texte 'azerty' le texte 'le contenu a changé.'

Les propriétés les plus intéressantes à modifier pour une manipulation de base sont :

A vous de modifier la propriété dont vous avez besoin!

Création d'éléments/Balises HTML

Après avoir vu comment sélectionner et modifier une balise, on va voir comment on en crée.

Pour en créer, on va utiliser la méthode "createElement" de 'document'. Elle prend en paramètre une chaîne de caractères, correspondant au nom de la balise.

Exemple : 

    
        //je vais créer un élément p. 
        const p = document.createElement('p').
        //console.log(p) affiche une balise p simple, n'ayant aucune propriété (sauf style si déjà défini dans le CSS).
        //on va rajouter du texte : 
        p.textContent = 'toto';

La balise p a été crée. Maintenant, il faut l'intégrer à notre HTML.

On va utiliser la méthode 'appendChild' à un élément html, pour l'intégrer en tant qu'un de ses enfants.

Si on applique la méthode à 'document.body', on va insérer le p à la fin de la balise body du code HTML.

    
        //j'insère la balise p crée précédemment dans mon html. 
        document.body.appendChild(p);
        //la balise p devrait être dans le code HTML lors du chargement de la page, et vous devriez voir toto sur la fin de votre page.

Plusieurs méthodes sont possibles pour l'insertion d'une balise dans une autre. Vous avez par exemple :

Vous avez enfin tous les éléments de base pour interagir avec votre affichage de page!