Analyser et modifier du HTML

Maintenant que vous savez parcourir tous les éléments de votre page HTML et que vous savez stocker n'importe lequel dans n'importe quelle variable que vous souhaitez, il s'agirait de savoir leur apporter des modifications.

Les attributs

Vous pouvez analyser les différentes valeurs des attributs d'un élément HTML ou même son contenu assez facilement. Encore une fois, des méthodes toutes faites existent pour cela. Par exemple pour une checkbox, savoir si elle est cochée ou non, en temps réel, il suffit de faire :

var myCheckbox = document.querySelector("input[type=checkbox]");
var isChecked = myCheckbox.checked;

if(isChecked){
    console.log("La case est cochée !");
}
else{
    myCheckbox.checked = true;
}

Dans ce code, je stocke dans ma variable myCheckbox la première checkbox qui apparait dans la page HTML (si vous ne comprenez pas le sélecteur CSS utilisé, vous pouvez vous renseigner sur internet, ils vous seront fort utiles !). Ensuite, je stocke dans ma variable isChecked un booléen (vrai ou faux) qui correspond à l'état de la case (cochée ou non cochée). On obtient cet état en accédant à l'attribut checked de myCheckbox en faisant myCheckbox.checked.

Ensuite j'applique une condition : si la case est cochée, on affiche un message dans la console, si ce n'est pas le cas, alors on la coche.

Vous pouvez voir que l'instruction pour cocher la case en JavaScript est : myCheckbox.checked = true; . En effet, c'est une variable, il suffit de changer sa valeur de la même manière dont on change la valeur de n'importe quelle autre variable. Cela va actualiser le DOM automatiquement (donc notre page HTML).

L'exemple de l'état d'une checkbox a été choisi pour illustrer la modification d'un élément du DOM, mais c'est la même chose pour n'importe quelle propriété. Par exemple, si l'on veut changer le type d'un input, nous pouvons utiliser la méthode généraliste setAttribute :

var myCheckbox = document.querySelector("input[type=checkbox]");
myCheckbox.setAttribute("type", "text");

Ce bout de code permet de récupérer notre checkbox dans une variable et puis de modifier son attribut type pour changer la checkbox en input text classique. Cela va actualiser le contenu HTML automatiquement.

Gestion de contenu

Au delà des attributs d'un élément, vous pouvez évidemment modifier tout le contenu HTML de votre page, sans limite. Par exemple vous pouvez obtenir l'intérieur d'une balise HTML où même changer sa valeur comme ceci :

var myDiv = document.getElementsByTagName("div")[0];
console.log(myDiv.innerHTML);
myDiv.innerHTML = "nouveau contenu de la div.";

Ce bout de code permet de stocker dans une variable la première div aperçu dans le document. En effet, vous remarquerez l'utilisation de [0] qui permet d'accéder au premier élément de la liste d'éléments document.getElementsByTagName("div") c'est à dire la liste des balises div du document. La seconde ligne permet d'afficher dans la console le contenu de l'intérieur de l'élément. La dernière ligne permet de modifier ce contenu. Vous l'aurez donc deviné, il existe une variable associée à chaque élément du DOM, permettant de lire et de modifier le contenu de l'intérieur de celui-ci.

Les éléments du DOM possèdent beaucoup de méthodes (comme les getters) mais aussi beaucoup de variables pouvant être modifiées assez simplement. Nous n'allons pas toutes les présenter puisqu'il y en a beaucoup et personne ne les connait toutes. Il est important de savoir qu'elles peuvent exister et qu'il faut vérifier la manière dont on y accède ainsi que leur comportement propre.

Vous pouvez alors consulter internet pour vérifier si des méthodes ou variables existent pour ce que vous souhaitez faire. La chose importante à garder en tête est que JavaScript permet de manipuler tout ce qui est accessible par votre navigateur.

Ajout et suppression

Comme la remarque précédente l'a souligné, il est possible de modifier à votre guise le contenu HTML d'une page à l'aide de JavaScript. On peut alors forcément supprimer des éléments existants sur la page ou même en créer des nouveaux. Des méthodes existent pour ces deux actions. Voici un exemple :

var myP = document.querySelector("p");
var container = myP.parentElement;
//on supprime le premier paragraphe du document.
myP.remove();
//on créé un paragraphe et on l'ajoute à la suite des autres éléments
//de l'élément parent du paragraphe que l'on vient de supprimer.
var newP = document.createElement("p");
newP.innerHTML("Ceci est le contenu du nouveau paragraphe !");
//Le nouvel élément existe sous forme d'objet JavaScript mais n'est pas encore
//sur la page HTML. Pour cela, il faut lui indiquer l'endroit où l'insérer.
//Ici, on l'insère à la suite des autres éléments de "container".
container.appendChild(newP);