Le DOM : Manipuler le HTML avec JavaScript

DOM : Document Object Model

Le DOM est la représentation en mémoire de la structure d'un document HTML.
Il est utilisé pour manipuler le document HTML avec des objets JavaScript.

Le DOM est une arborescence de nœuds, qui représente la structure d'un document HTML.
Chaque élément HTML est un nœud, et chaque nœud a des propriétés et des méthodes.

Exemple de structure HTML

<html>
    <head>
        <title>Mon titre</title>
        <meta charset="UTF-8"></meta>
    </head>
    <body>
        <h1>Mon titre</h1>
        <p>Mon paragraphe</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </body>
</html>

Le DOM est donc l'ensemble des objets JavaScript qui représentent la structure d'un document HTML.

Accéder aux éléments du DOM

On peut accéder aux éléments du DOM avec la propriété document.
On peut accéder aux propriétés et méthodes de ces éléments avec la propriété .

console.log(document.title); // Mon titre
console.log(document.body); // <body>Mon titre</body>
console.log(document.body.children); // [<h1>, <p>, <ul>]
// etc...

Modifier le DOM

On peut également modifier le DOM avec des objets JavaScript.

document.title = "Nouveau titre";
document.body.children[0].innerHTML = "Nouveau titre";
document.body.children[1].innerHTML = "Nouveau paragraphe";
document.body.children[2].innerHTML = "Nouveau item 1";
document.body.children[3].innerHTML = "Nouveau item 2";
document.body.children[4].innerHTML = "Nouveau item 3";

Donc si on a une page html, on peut accéder à ses éléments, et les modifier avec le JS.
C'est ce qu'on fait quand on veut de l'interactivité sur une page web !
Car modifier une valeur sans modifier le DOM, c'est pas possible ! Il faut absolument modifier le DOM ou refresh la page !

Ajouter des éléments au DOM

On peut également ajouter des éléments au DOM avec des objets JavaScript.

document.body.appendChild(document.createElement("h1"));
document.body.children[0].innerHTML = "Nouveau titre";

Supprimer des éléments du DOM

On peut également supprimer des éléments du DOM avec des objets JavaScript.

document.body.removeChild(document.body.children[0]);

Limitation et solutions

Sauf que dès qu'on veut faire des choses complexes, on veut éviter de taper 400 lignes de codes juste pour update les états
de la page, et update les valeurs directement. On veut juste que la valeur se mettre à jour automatiquement.
Pour régler ce problème et permettre de faire des choses complexes, c'est ici qu'intervient les fameux 'framework JS' !