feat(docs): add documentation for DOM manipulation
This commit is contained in:
parent
308fda97bb
commit
25c572d1dd
@ -127,10 +127,10 @@ export const navigation: NavigationSection[] = [
|
||||
title: "Fonctions et portée",
|
||||
href: "/docs/javascript/fonctions-et-portee",
|
||||
},
|
||||
// {
|
||||
// title: "Le DOM",
|
||||
// href: "/docs/javascript/dom",
|
||||
// },
|
||||
{
|
||||
title: "Le DOM",
|
||||
href: "/docs/javascript/dom",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -116,4 +116,106 @@ Je ne vais pas rentrer dans les détails ici, mais tu peux en savoir plus sur ce
|
||||
|
||||
### 🔧 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)`.
|
||||
On a eu l'occasion de voir comment modifier le contenu d'un élément, mais on peut également modifier ses attributs.
|
||||
Pour modifier les attributs d'un élément, on peut utiliser la méthode `element.setAttribute(attribute, value)`.
|
||||
|
||||
Mais avant d'aller plus loin...
|
||||
|
||||
<Callout type="question" title="C'est quoi un attribut ?">
|
||||
Un attribut est une propriété d'un élément HTML.
|
||||
|
||||
Par exemple, l'attribut `src` d'une balise `<img>` est la source de l'image.
|
||||
</Callout>
|
||||
|
||||
En conservant l'exemple de l'image, on peut modifier son attribut `src` pour changer l'image affichée.
|
||||
|
||||
<tabs.jsDomAttributesModificationExplanations />
|
||||
|
||||
Si maintenant on souhaite supprimer un attribut, on aura une méthode similaire : `element.removeAttribute(attribute)`.
|
||||
|
||||
<tabs.jsDomAttributesDeletionExplanations />
|
||||
|
||||
D'autres variantes existent pour manipuler les attributs d'un élément :
|
||||
|
||||
- `element.hasAttribute(attribute)` : Vérifie si l'élément a un attribut.
|
||||
- `element.getAttribute(attribute)` : Récupère la valeur d'un attribut.
|
||||
- `element.toggleAttribute(attribute, value)` : Ajoute ou supprime un attribut.
|
||||
|
||||
<tabs.jsDomAttributesVerificationExplanations />
|
||||
|
||||
Et en réalité, c'est à peu près tout pour la modification des attributs d'un élément !
|
||||
Avec une exception pour...
|
||||
|
||||
### 🔄 Modifier les classes d'un élément
|
||||
|
||||
Pour modifier les classes d'un élément, on n'utilise pas la méthode `element.setAttribute()`, mais plutôt les méthodes présentes dans la propriété `element.classList`.
|
||||
|
||||
`element.classList` est une propriété qui contient une liste de classes de l'élément _(en lecteur seule, impossible de modifier directement la liste)_, mais qui a également des méthodes pour les manipuler.
|
||||
|
||||
Les fameuses méthodes sont :
|
||||
|
||||
- `element.classList.add(className)` : Ajoute une classe à l'élément.
|
||||
- `element.classList.remove(className)` : Supprime une classe de l'élément.
|
||||
- `element.classList.toggle(className)` : Ajoute ou supprime une classe de l'élément.
|
||||
- `element.classList.contains(className)` : Vérifie si l'élément a une classe.
|
||||
|
||||
<tabs.jsDomClassesModificationExplanations />
|
||||
|
||||
Plutôt simple à utiliser, non ? 😏
|
||||
|
||||
### 🔄 Modifier les styles d'un élément
|
||||
|
||||
Maintenant que l'on sait comment modifier le contenu d'un élément, ses attributs et ses classes, on peut se pencher sur les styles.
|
||||
|
||||
Comme pour les classes, on n'utilise pas la méthode `element.setAttribute()`.
|
||||
On va plutôt utiliser la propriété `element.style` pour modifier les styles d'un élément.
|
||||
|
||||
`element.style` est une propriété qui contient un objet de styles de l'élément _(en lecteur seule, impossible de modifier directement l'objet)_, mais qui a également des méthodes pour les manipuler.
|
||||
|
||||
On retrouve les méthodes suivantes :
|
||||
|
||||
- `element.style.setProperty(property, value)` : Modifie la valeur d'un style.
|
||||
- `element.style.getPropertyValue(property)` : Récupère la valeur d'un style.
|
||||
- `element.style.removeProperty(property)` : Supprime un style.
|
||||
|
||||
<tabs.jsDomStylesModificationExplanations />
|
||||
|
||||
Ici encore, on reste sur de l'utilisation relativement simple !
|
||||
|
||||
<Callout type="warning" title="Attention à la modification des styles inline">
|
||||
Les styles inline sont des styles qui sont appliqués directement à l'élément dans le code HTML.
|
||||
|
||||
Ils sont très pratiques pour des cas très spécifiques, mais il faut **bien comprendre** qu'ils sont **prioritaires** par rapport aux autres styles.
|
||||
Il est préférable d'utiliser autant que possible les classes CSS pour modifier les styles d'un élément.
|
||||
|
||||
Cependant, il est parfois nécessaire d'utiliser les styles inline pour des raisons de personnalisation.
|
||||
C'est notamment le cas pour la mise en place de variables CSS dynamiques, ou pour des cas très spécifiques !
|
||||
</Callout>
|
||||
|
||||
### 🔨 Créer un élément
|
||||
|
||||
Personnaliser des éléments c'est top, mais les créer c'est encore mieux !
|
||||
|
||||
<Callout type="note" title="Les frameworks JavaScript front-end">
|
||||
Avant même de te montrer comment ça marche, laisse moi te dire que c'est le principe utilisé par de nombreux frameworks et bibliothèques JavaScript front-end pour créer des interfaces utilisateurs.
|
||||
|
||||
Pour citer les plus connus, on retrouve :
|
||||
|
||||
- [React](https://react.dev/)
|
||||
- [Vue.js](https://vuejs.org/)
|
||||
- [Angular](https://angular.io/)
|
||||
- [Svelte](https://svelte.dev/)
|
||||
- [Solid](https://www.solidjs.com/)
|
||||
|
||||
On garde ce sujet pour une prochaine fois, d'autant plus que ces outils nécessitent une compréhension plus approfondie des concepts JavaScript.
|
||||
</Callout>
|
||||
|
||||
Mais alors, sous le capot, que font ces outils ?
|
||||
|
||||
Pour créer un élément, on peut utiliser la méthode `document.createElement(tagName)`.
|
||||
|
||||
## 🤝 Conclusion
|
||||
|
||||
Allez, on s'arrête là pour aujourd'hui !
|
||||
|
||||
Mais avec toutes ces propriétés et méthodes, tu as de quoi manipuler le DOM comme un pro ! 😎
|
||||
@ -168,6 +168,145 @@ element.textContent = "Nouveau contenu";`,
|
||||
},
|
||||
];
|
||||
|
||||
const jsDomAttributesModificationExplanations = [
|
||||
{
|
||||
name: "Modification de l'attribut src",
|
||||
codeLanguage: "js",
|
||||
code: `const image = document.getElementById("image-id");
|
||||
|
||||
image.setAttribute("src", "https://example.com/image.jpg");`,
|
||||
},
|
||||
];
|
||||
|
||||
const jsDomAttributesDeletionExplanations = [
|
||||
{
|
||||
name: "Suppression de l'attribut src",
|
||||
codeLanguage: "js",
|
||||
code: `const image = document.getElementById("image-id");
|
||||
|
||||
image.removeAttribute("src");`,
|
||||
},
|
||||
];
|
||||
|
||||
const jsDomAttributesVerificationExplanations = [
|
||||
{
|
||||
name: "Vérification de l'attribut src",
|
||||
codeLanguage: "js",
|
||||
code: `const image = document.getElementById("image-id");
|
||||
|
||||
if (image.hasAttribute("src")) {
|
||||
const attributeValue = image.getAttribute("src");
|
||||
console.log("L'attribut src a la valeur :", attributeValue);
|
||||
}`,
|
||||
},
|
||||
{
|
||||
name: "Alterner un attribut avec toggleAttribute",
|
||||
codeLanguage: "js",
|
||||
code: `const button = document.getElementById("button-id");
|
||||
|
||||
// Alterne l'attribut disabled entre true et false (vrai ou faux)
|
||||
button.toggleAttribute("disabled");`,
|
||||
},
|
||||
{
|
||||
name: "Alterner un attribut avec toggleAttribute avec un argument",
|
||||
codeLanguage: "js",
|
||||
code: `const button = document.getElementById("button-id");
|
||||
|
||||
const shouldDisable = true;
|
||||
|
||||
// Passe l'attribut disabled à un état forcé,
|
||||
// en fonction de la valeur de shouldDisable
|
||||
button.toggleAttribute("disabled", shouldDisable);`,
|
||||
},
|
||||
];
|
||||
|
||||
const jsDomClassesModificationExplanations = [
|
||||
{
|
||||
name: "Ajouter une classe avec add",
|
||||
codeLanguage: "js",
|
||||
code: `const element = document.getElementById("element-id");
|
||||
|
||||
// Ajoute la classe css-class
|
||||
element.classList.add("css-class");`,
|
||||
},
|
||||
{
|
||||
name: "Ajouter plusieurs classes avec add",
|
||||
codeLanguage: "js",
|
||||
code: `const element = document.getElementById("element-id");
|
||||
|
||||
// Ajoute les classes css-class, css-class-2 et css-class-3
|
||||
element.classList.add("css-class", "css-class-2", "css-class-3");`,
|
||||
},
|
||||
{
|
||||
name: "Supprimer une classe avec remove",
|
||||
codeLanguage: "js",
|
||||
code: `const element = document.getElementById("element-id");
|
||||
|
||||
// Supprime la classe css-class
|
||||
element.classList.remove("css-class");`,
|
||||
},
|
||||
{
|
||||
name: "Supprimer plusieurs classes avec remove",
|
||||
codeLanguage: "js",
|
||||
code: `const element = document.getElementById("element-id");
|
||||
|
||||
// Supprime les classes css-class, css-class-2 et css-class-3
|
||||
element.classList.remove("css-class", "css-class-2", "css-class-3");`,
|
||||
},
|
||||
{
|
||||
name: "Vérifier si un élément a une classe avec contains",
|
||||
codeLanguage: "js",
|
||||
code: `const element = document.getElementById("element-id");
|
||||
|
||||
// Retourne true si l'élément a la classe css-class, false sinon
|
||||
element.classList.contains("css-class");`,
|
||||
},
|
||||
{
|
||||
name: "Alterner une classe avec toggle",
|
||||
codeLanguage: "js",
|
||||
code: `const element = document.getElementById("element-id");
|
||||
|
||||
// Ajoute ou supprime la classe css-class,
|
||||
// en fonction de sa présence ou non
|
||||
element.classList.toggle("css-class");`,
|
||||
},
|
||||
{
|
||||
name: "Alterner une classe avec toggle avec un argument",
|
||||
codeLanguage: "js",
|
||||
code: `const element = document.getElementById("element-id");
|
||||
|
||||
const shouldToggle = true;
|
||||
|
||||
// Alterne la classe css-class entre true et false (vrai ou faux),
|
||||
// en fonction de la valeur de shouldToggle
|
||||
element.classList.toggle("css-class", shouldToggle);`,
|
||||
},
|
||||
];
|
||||
|
||||
const jsDomStylesModificationExplanations = [
|
||||
{
|
||||
name: "Modification de la couleur de texte",
|
||||
codeLanguage: "js",
|
||||
code: `const element = document.getElementById("element-id");
|
||||
|
||||
element.style.setProperty("color", "red");`,
|
||||
},
|
||||
{
|
||||
name: "Récupération de la valeur d'un style",
|
||||
codeLanguage: "js",
|
||||
code: `const element = document.getElementById("element-id");
|
||||
|
||||
const styleValue = element.style.getPropertyValue("color");`,
|
||||
},
|
||||
{
|
||||
name: "Suppression d'un style",
|
||||
codeLanguage: "js",
|
||||
code: `const element = document.getElementById("element-id");
|
||||
|
||||
element.style.removeProperty("color");`,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
jsDomExplanations: () => <Snippet snippets={jsDomExplanations} />,
|
||||
jsDomSelectionExplanations: () => (
|
||||
@ -176,4 +315,19 @@ export default {
|
||||
jsDomContentModificationExplanations: () => (
|
||||
<Snippet snippets={jsDomContentModificationExplanations} />
|
||||
),
|
||||
jsDomAttributesModificationExplanations: () => (
|
||||
<Snippet snippets={jsDomAttributesModificationExplanations} />
|
||||
),
|
||||
jsDomAttributesDeletionExplanations: () => (
|
||||
<Snippet snippets={jsDomAttributesDeletionExplanations} />
|
||||
),
|
||||
jsDomAttributesVerificationExplanations: () => (
|
||||
<Snippet snippets={jsDomAttributesVerificationExplanations} />
|
||||
),
|
||||
jsDomClassesModificationExplanations: () => (
|
||||
<Snippet snippets={jsDomClassesModificationExplanations} />
|
||||
),
|
||||
jsDomStylesModificationExplanations: () => (
|
||||
<Snippet snippets={jsDomStylesModificationExplanations} />
|
||||
),
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user