diff --git a/app/libs/navigation.ts b/app/libs/navigation.ts
index 678e061..2f7920b 100644
--- a/app/libs/navigation.ts
+++ b/app/libs/navigation.ts
@@ -127,6 +127,10 @@ export const navigation: NavigationSection[] = [
title: "Fonctions et portée",
href: "/docs/javascript/fonctions-et-portee",
},
+ {
+ title: "Le DOM",
+ href: "/docs/javascript/dom",
+ },
],
},
{
diff --git a/app/pages/docs/javascript/dom/+Page.mdx b/app/pages/docs/javascript/dom/+Page.mdx
new file mode 100644
index 0000000..5f47f9b
--- /dev/null
+++ b/app/pages/docs/javascript/dom/+Page.mdx
@@ -0,0 +1,119 @@
+---
+title: La manipulation du DOM avec JavaScript
+description: Découvrez comment maîtriser le DOM en JavaScript et donnez vie à vos pages web !
+tags: []
+---
+
+import QuickLinks from "@/components/QuickLinks";
+import Callout from "@/components/Callout";
+import tabs from "./tabs";
+
+Maintenant que nous avons vu les grandes lignes du langage JavaScript, tu vas enfin pouvoir entrer dans le vif du sujet : la **manipulation du DOM** avec JavaScript.
+
+## 🤔 Qu'est-ce que le DOM ?
+
+Le **Document Object Model** _(ou **DOM** en anglais)_ est une interface de programmation pour les documents HTML et XML. Il permet de représenter la page web comme un arbre de **nœuds**.
+
+Chaque élément HTML est un nœud dans l'arbre, et les nœuds peuvent contenir d'autres nœuds.
+Mais un nœud peut aussi être un **texte** ou une **propriété** d'un élément !
+
+Pour que ce soit plus facile à comprendre, voici quelques analogies pour t'aider à comprendre ce qu'est le DOM.
+
+
+
+## 🤖 Manipulation du DOM
+
+La manipulation du DOM avec JavaScript permet de modifier la structure et le contenu de la page web.
+Le grand avantage du DOM est qu'il est **très rapide** à manipuler, et que c'est **très simple** à comprendre.
+
+Mais pour le manipuler, il faut d'abord **sélectionner** les éléments que l'on veut modifier.
+
+### 🔍 Sélectionner un élément
+
+Pour sélectionner un élément, on peut utiliser plusieurs méthodes :
+
+- `document.getElementById(id)` : Sélectionne un élément par son `id` _(propriété HTML `id`)_.
+- `document.getElementsByClassName(className)` : Sélectionne tous les éléments par leur `className` _(propriété HTML `class`)_.
+- `document.getElementsByTagName(tagName)` : Sélectionne tous les éléments par leur `tagName` _(balise HTML)_.
+- `document.querySelector(selector)` : Sélectionne le premier élément qui correspond au `selector` _(sélecteur CSS)_.
+- `document.querySelectorAll(selector)` : Sélectionne tous les éléments qui correspondent au `selector` _(sélecteur CSS)_.
+
+Voici quelques exemples commentés pour visualiser ces méthodes :
+
+
+
+Selon la méthode utilisée, on peut récupérer un élément ou une liste d'éléments.
+Pour mémoriser ces méthodes, fais attention à la présence du pluriel dans le nom de la méthode :
+
+- `getElementById` _(singulier)_ : Retourne un élément.
+- `getElementsByClassName` _(pluriel)_ : Retourne une liste d'éléments.
+- `getElementsByTagName` _(pluriel)_ : Retourne une liste d'éléments.
+- `querySelector` _(singulier)_ : Retourne un élément.
+- `querySelectorAll` _(pluriel)_ : Retourne une liste d'éléments.
+
+
+ Si aucun élément n'est trouvé, la méthode retourne `null`.
+
+ Cependant, si on utilise une méthode qui retourne une liste d'éléments, la liste ne sera pas `null`, mais **vide**.
+
+
+### ✏️ Modifier le contenu d'un élément
+
+Pour modifier le contenu d'un élément, on retrouve trois propriétés :
+
+- `element.innerHTML` : Modifie le contenu HTML de l'élément.
+- `element.innerText` : Modifie le contenu texte de l'élément.
+- `element.textContent` : Modifie le contenu texte de l'élément.
+
+Voici quelques exemples commentés pour visualiser ces propriétés :
+
+
+
+
+ Si ça te rassure, c'est normal ! Ces deux propriétés sont très similaires, mais n'ont pas les mêmes comportements.
+
+ - `innerText` : Modifie le contenu texte de l'élément, et ignore les balises HTML.
+ - `textContent` : Modifie le contenu texte de l'élément, et prend en compte les balises HTML.
+
+
+
+ La propriété `innerHTML` est très puissante, mais elle peut également être dangereuse.
+
+ En l'utilisant, on expose la page à des attaques de type **XSS** _(Cross-Site Scripting)_ !
+ Il est donc **fortement conseillé** d'utiliser `textContent` ou `innerText` plutôt que `innerHTML`.
+
+ Dans le cas où l'on doit utiliser `innerHTML`, il est **fortement conseillé** de **sanitiser** le contenu avant de l'afficher.
+
+
+Je ne vais pas rentrer dans les détails ici, mais tu peux en savoir plus sur ces deux propriétés dans la documentation de MDN :
+
+
+
+
+
+
+
+
+### 🔧 Modifier les attributs d'un élément
+
+Pour modifier les attributs d'un élément, on peut utiliser la propriété `element.setAttribute(attribute, value)`.
\ No newline at end of file
diff --git a/app/pages/docs/javascript/dom/tabs.tsx b/app/pages/docs/javascript/dom/tabs.tsx
new file mode 100644
index 0000000..66e2f0c
--- /dev/null
+++ b/app/pages/docs/javascript/dom/tabs.tsx
@@ -0,0 +1,179 @@
+import { Snippet } from "@/components/Snippet";
+
+const jsDomExplanations = [
+ {
+ name: "Livre et ses chapitres",
+ children: (
+
+ -
+ Document : Le livre entier, qui contient tous les
+ chapitres.
+
+ -
+ Élément : Les chapitres du livre, chacun avec son
+ titre et son contenu.
+
+ -
+ Attribut : Les notes ou les annotations dans les
+ marges qui décrivent ou mettent en valeur certains passages.
+
+ -
+ Texte : Le contenu réel des pages, les mots et les
+ paragraphes qui sont écrits.
+
+
+ ),
+ },
+ {
+ name: "Arbre généalogique",
+ children: (
+
+ -
+ Document : L'arbre généalogique complet, représentant
+ toute la famille.
+
+ -
+ Élément : Les branches de l'arbre, représentant les
+ différentes générations ou familles.
+
+ -
+ Attribut : Les détails sur chaque personne, comme
+ leur date de naissance ou leur métier.
+
+ -
+ Texte : Les noms des personnes dans l'arbre, les
+ membres individuels de la famille.
+
+
+ ),
+ },
+ {
+ name: "Système solaire",
+ children: (
+
+ -
+ Document : Le système solaire complet, avec toutes
+ ses planètes et étoiles.
+
+ -
+ Élément : Les planètes individuelles, chacune avec
+ ses propres caractéristiques et orbites.
+
+ -
+ Attribut : Les détails des planètes, comme leur
+ taille, leur composition ou leur distance par rapport au soleil.
+
+ -
+ Texte : Les noms des planètes et des étoiles, les
+ éléments individuels du système solaire.
+
+
+ ),
+ },
+ {
+ name: "Organisation d'une entreprise",
+ children: (
+
+ -
+ Document : L'entreprise entière, avec tous ses
+ départements et employés.
+
+ -
+ Élément : Les différents départements, comme les
+ ressources humaines, la finance ou le marketing.
+
+ -
+ Attribut : Les détails des employés, comme leur
+ poste, leur bureau ou leur salaire.
+
+ -
+ Texte : Les noms des employés, les personnes qui
+ travaillent dans chaque département.
+
+
+ ),
+ },
+];
+
+const jsDomSelectionExplanations = [
+ {
+ name: "document.getElementById(id)",
+ codeLanguage: "js",
+ code: `// Sélectionner un élément par son ID
+// Ici, on sélectionne l'élément qui a l'ID "id"
+
+const element = document.getElementById("id");`,
+ },
+ {
+ name: "document.getElementsByClassName(className)",
+ codeLanguage: "js",
+ code: `// Sélectionner tous les éléments par leur classe
+// Ici, on sélectionne tous les éléments qui ont la classe "css-class"
+
+const elements = document.getElementsByClassName("css-class");`,
+ },
+ {
+ name: "document.getElementsByTagName(tagName)",
+ codeLanguage: "js",
+ code: `// Sélectionner tous les éléments par leur balise
+// Ici, on sélectionne tous les éléments qui sont des paragraphes
+
+const elements = document.getElementsByTagName("p");`,
+ },
+ {
+ name: "document.querySelector(selector)",
+ codeLanguage: "js",
+ code: `// Sélectionner le premier élément qui correspond au sélecteur
+// Ici, on sélectionne le premier élément qui a la classe "css-class"
+
+const element = document.querySelector(".css-class");`,
+ },
+ {
+ name: "document.querySelectorAll(selector)",
+ codeLanguage: "js",
+ code: `// Sélectionner tous les éléments qui correspondent au sélecteur
+// Ici, on sélectionne tous les éléments qui ont la classe "css-class"
+
+const elements = document.querySelectorAll(".css-class");`,
+ },
+];
+
+const jsDomContentModificationExplanations = [
+ {
+ name: "element.innerHTML",
+ codeLanguage: "js",
+ code: `// Modifier le contenu HTML de l'élément
+
+const element = document.getElementById("id");
+
+element.innerHTML = "Nouveau contenu
";`,
+ },
+ {
+ name: "element.innerText",
+ codeLanguage: "js",
+ code: `// Modifier le contenu texte de l'élément
+
+const element = document.getElementById("id");
+
+element.innerText = "Nouveau contenu";`,
+ },
+ {
+ name: "element.textContent",
+ codeLanguage: "js",
+ code: `// Modifier le contenu texte de l'élément
+
+const element = document.getElementById("id");
+
+element.textContent = "Nouveau contenu";`,
+ },
+];
+
+export default {
+ jsDomExplanations: () => ,
+ jsDomSelectionExplanations: () => (
+
+ ),
+ jsDomContentModificationExplanations: () => (
+
+ ),
+};