docs/js #26
@ -127,6 +127,10 @@ export const navigation: NavigationSection[] = [
|
|||||||
title: "Fonctions et portée",
|
title: "Fonctions et portée",
|
||||||
href: "/docs/javascript/fonctions-et-portee",
|
href: "/docs/javascript/fonctions-et-portee",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Le DOM",
|
||||||
|
href: "/docs/javascript/dom",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
119
app/pages/docs/javascript/dom/+Page.mdx
Normal file
119
app/pages/docs/javascript/dom/+Page.mdx
Normal file
@ -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.
|
||||||
|
|
||||||
|
<tabs.jsDomExplanations />
|
||||||
|
|
||||||
|
## 🤖 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 :
|
||||||
|
|
||||||
|
<tabs.jsDomSelectionExplanations />
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
<Callout type="note" title="Aucun élément trouvé">
|
||||||
|
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**.
|
||||||
|
</Callout>
|
||||||
|
|
||||||
|
### ✏️ 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 :
|
||||||
|
|
||||||
|
<tabs.jsDomContentModificationExplanations />
|
||||||
|
|
||||||
|
<Callout type="question" title="Je ne comprends pas la différence entre innerText et textContent">
|
||||||
|
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.
|
||||||
|
</Callout>
|
||||||
|
|
||||||
|
<Callout type="warning" title="Attention à innerHTML">
|
||||||
|
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.
|
||||||
|
</Callout>
|
||||||
|
|
||||||
|
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 :
|
||||||
|
|
||||||
|
<QuickLinks>
|
||||||
|
<QuickLinks.QuickLink
|
||||||
|
title="MDN - innerText"
|
||||||
|
href="https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/innerText"
|
||||||
|
description="Documentation de MDN sur la propriété innerText"
|
||||||
|
icon="presets"
|
||||||
|
/>
|
||||||
|
<QuickLinks.QuickLink
|
||||||
|
title="MDN - textContent"
|
||||||
|
href="https://developer.mozilla.org/fr/docs/Web/API/Node/textContent"
|
||||||
|
description="Documentation de MDN sur la propriété textContent"
|
||||||
|
icon="presets"
|
||||||
|
/>
|
||||||
|
<QuickLinks.QuickLink
|
||||||
|
title="MDN - innerHTML"
|
||||||
|
href="https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML"
|
||||||
|
description="Documentation de MDN sur la propriété innerHTML"
|
||||||
|
icon="presets"
|
||||||
|
/>
|
||||||
|
<QuickLinks.QuickLink
|
||||||
|
title="MDN - Cross-Site Scripting"
|
||||||
|
href="https://developer.mozilla.org/fr/docs/Glossary/Cross-site_scripting"
|
||||||
|
description="Documentation de MDN sur le Cross-Site Scripting"
|
||||||
|
icon="presets"
|
||||||
|
/>
|
||||||
|
</QuickLinks>
|
||||||
|
|
||||||
|
### 🔧 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)`.
|
||||||
179
app/pages/docs/javascript/dom/tabs.tsx
Normal file
179
app/pages/docs/javascript/dom/tabs.tsx
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
import { Snippet } from "@/components/Snippet";
|
||||||
|
|
||||||
|
const jsDomExplanations = [
|
||||||
|
{
|
||||||
|
name: "Livre et ses chapitres",
|
||||||
|
children: (
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>Document</strong> : Le livre entier, qui contient tous les
|
||||||
|
chapitres.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Élément</strong> : Les chapitres du livre, chacun avec son
|
||||||
|
titre et son contenu.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Attribut</strong> : Les notes ou les annotations dans les
|
||||||
|
marges qui décrivent ou mettent en valeur certains passages.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Texte</strong> : Le contenu réel des pages, les mots et les
|
||||||
|
paragraphes qui sont écrits.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Arbre généalogique",
|
||||||
|
children: (
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>Document</strong> : L'arbre généalogique complet, représentant
|
||||||
|
toute la famille.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Élément</strong> : Les branches de l'arbre, représentant les
|
||||||
|
différentes générations ou familles.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Attribut</strong> : Les détails sur chaque personne, comme
|
||||||
|
leur date de naissance ou leur métier.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Texte</strong> : Les noms des personnes dans l'arbre, les
|
||||||
|
membres individuels de la famille.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Système solaire",
|
||||||
|
children: (
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>Document</strong> : Le système solaire complet, avec toutes
|
||||||
|
ses planètes et étoiles.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Élément</strong> : Les planètes individuelles, chacune avec
|
||||||
|
ses propres caractéristiques et orbites.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Attribut</strong> : Les détails des planètes, comme leur
|
||||||
|
taille, leur composition ou leur distance par rapport au soleil.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Texte</strong> : Les noms des planètes et des étoiles, les
|
||||||
|
éléments individuels du système solaire.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Organisation d'une entreprise",
|
||||||
|
children: (
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>Document</strong> : L'entreprise entière, avec tous ses
|
||||||
|
départements et employés.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Élément</strong> : Les différents départements, comme les
|
||||||
|
ressources humaines, la finance ou le marketing.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Attribut</strong> : Les détails des employés, comme leur
|
||||||
|
poste, leur bureau ou leur salaire.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Texte</strong> : Les noms des employés, les personnes qui
|
||||||
|
travaillent dans chaque département.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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 = "<p>Nouveau contenu</p>";`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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: () => <Snippet snippets={jsDomExplanations} />,
|
||||||
|
jsDomSelectionExplanations: () => (
|
||||||
|
<Snippet snippets={jsDomSelectionExplanations} />
|
||||||
|
),
|
||||||
|
jsDomContentModificationExplanations: () => (
|
||||||
|
<Snippet snippets={jsDomContentModificationExplanations} />
|
||||||
|
),
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user