DOM JAVASCRIPT

SELECTION D’UN ELEMENT

1. Sélection par ID

Utilisez la méthode document.getElementById() pour sélectionner un élément avec un ID

spécifique.

const element = document.getElementById("monId");

console.log(element);

2. Sélection par Classe

Utilisez document.getElementsByClassName() pour obtenir une collection d'éléments

ayant une classe donnée.

const elements = document.getElementsByClassName("maClasse");

console.log(elements); // HTMLCollection

3. Sélection par Balise

Utilisez document.getElementsByTagName() pour obtenir une collection d'éléments par

nom de balise.

const elements = document.getElementsByTagName("div");

console.log(elements); // HTMLCollection

4. Sélection par Sélecteur CSS

• Un seul élément : document.querySelector()

• Tous les éléments correspondants : document.querySelectorAll()

Exemple :

// Sélectionne le premier élément correspondant au sélecteur

const premierElement = document.querySelector(".maClasse");
console.log(premierElement);

// Sélectionne tous les éléments correspondant au sélecteur

const tousLesElements = document.querySelectorAll(".maClasse");
console.log(tousLesElements); // NodeList

5. Combinaisons avancées avec les Sélecteurs CSS

Vous pouvez combiner plusieurs sélecteurs comme en CSS :

// Sélectionne un élément avec un ID spécifique dans une classe

const element = document.querySelector(".maClasse #monId");

// Sélectionne toutes les balises `<p>` dans une balise `<div>`

const paragraphs = document.querySelectorAll("div p");
console.log(element);
console.log(paragraphs);

6. Boucle sur les éléments sélectionnés

Quand vous utilisez querySelectorAll() ou getElementsByClassName(), vous pouvez

boucler sur les éléments pour les manipuler.

Exemple avec forEach:

const elements = document.querySelectorAll(".maClasse");

elements.forEach(element => {
console.log(element.textContent); // Affiche le texte des éléments
});

7. Manipulation des Éléments

Après avoir sélectionné un élément, vous pouvez interagir avec lui :

• Modifier son contenu :

const element = document.getElementById("monId");

element.textContent = "Nouveau contenu";

• Modifier ses styles :

element.style.color = "red";
element.style.fontSize = "20px";

• Ajouter une classe :

element.classList.add("nouvelleClasse");

• Supprimer une classe :

element.classList.remove("ancienneClasse");

SELECTION DES ENFANTS ET PARENTS

En JavaScript, vous pouvez facilement sélectionner les parents et les enfants d'un élément
DOM grâce à des propriétés et des méthodes intégrées.

1. Sélec)onner les Parents

Propriété parentElement

• Renvoie le parent direct (immédiat) de l'élément.

const enfant = document.querySelector(".enfant");

const parent = enfant.parentElement;
console.log(parent);
Propriété closest()

• Recherche le premier ancêtre (parent ou au-dessus) correspondant à un sélecteur

CSS.

const enfant = document.querySelector(".enfant");

const parentSpécifique = enfant.closest(".parentClasse");
console.log(parentSpécifique);
2. Sélec)onner les Enfants

Propriété children

• Renvoie tous les enfants directs d'un élément (sous forme d'une collec>on HTML).

const parent = document.querySelector(".parent");

const enfants = parent.children;
console.log(enfants); // HTMLCollection

Méthode querySelectorAll pour sélectionner des enfants spécifiques

• Vous pouvez u>liser un sélecteur CSS pour sélec>onner les enfants avec des critères
spécifiques.

const parent = document.querySelector(".parent");

const enfantsSpecifiques = parent.querySelectorAll(".enfant");
console.log(enfantsSpecifiques); // NodeList

Premier ou Dernier Enfant

• U>lisez firstElementChild ou lastElementChild pour accéder directement au

premier ou au dernier enfant.

const parent = document.querySelector(".parent");

const premierEnfant = parent.firstElementChild;
const dernierEnfant = parent.lastElementChild;

console.log(premierEnfant);
console.log(dernierEnfant);
3. Naviguer entre les Frères et Sœurs

Propriété nextElementSibling

• Accède au frère ou à la sœur suivant(e).

const enfant = document.querySelector(".enfant");

const suivant = enfant.nextElementSibling;
console.log(suivant);

Propriété previousElementSibling

• Accède au frère ou à la sœur précédent(e).

const enfant = document.querySelector(".enfant");
const precedent = enfant.previousElementSibling;
console.log(precedent);
4. Exemple Pra)que

Supposons une structure HTML comme celle-ci :

<div class="parent">
<p class="enfant">Enfant 1</p>
<p class="enfant">Enfant 2</p>
<p class="enfant">Enfant 3</p>
</div>

Exemple de Code JavaScript :

const parent = document.querySelector(".parent");

// Sélectionner tous les enfants directs

const enfants = parent.children;
console.log("Enfants :", enfants);

// Sélectionner un enfant spécifique et son parent

const enfant2 = document.querySelector(".enfant:nth-child(2)");
const parentDeEnfant2 = enfant2.parentElement;
console.log("Parent de l'enfant 2 :", parentDeEnfant2);

// Naviguer entre frères et sœurs

const enfantSuivant = enfant2.nextElementSibling;
const enfantPrecedent = enfant2.previousElementSibling;
console.log("Frère suivant :", enfantSuivant);
console.log("Frère précédent :", enfantPrecedent);

// Sélectionner le premier et le dernier enfant

console.log("Premier enfant :", parent.firstElementChild);
console.log("Dernier enfant :", parent.lastElementChild);
5. Cas Avancé : Filtrer les Enfants

Si vous souhaitez filtrer les enfants selon une condition, vous pouvez utiliser Array.from()
pour transformer une collection HTML en tableau :

const parent = document.querySelector(".parent");

// Filtrer les enfants ayant une classe spécifique

const enfants = Array.from(parent.children).filter(enfant =>
enfant.classList.contains("enfant")
);
console.log("Enfants filtrés :", enfants);

textContent innerText innerHTML

En JavaScript, textContent, innerText, et innerHTML sont des propriétés utilisées pour

manipuler ou récupérer le contenu d'un élément dans le DOM. Bien qu'elles semblent
similaires, elles ont des différences importantes. Voici une explication détaillée :
1. textContent

• Définition : Renvoie ou définit le contenu textuel d'un élément, y compris les espaces
et les retours à la ligne. Cela inclut tout le texte dans les nœuds enfants, même s'ils
sont cachés par des styles CSS.
• Caractéristiques :
o Récupère tout le texte, qu'il soit visible ou non.
o Ne prend pas en compte le style (ex : display: none).
o Évite de traiter du HTML : uniquement du texte brut.
• Usage :
• <div id="element">
• <p>Bonjour <span>monde</span>!</p>
• </div>
• const element = document.getElementById("element");
• console.log(element.textContent); // "Bonjour monde!"

Modification :

element.textContent = "Nouveau texte";

console.log(element.textContent); // "Nouveau texte"
2. innerText

• Définition : Renvoie ou définit le contenu textuel d'un élément visible à l'écran, c'est-
à-dire le texte visible après application des styles CSS (comme display: none ou
visibility: hidden).
• Caractéristiques :
o Ne récupère que le texte visible.
o Respecte les styles CSS affectant la visibilité ou l'affichage.
o La mise en page visuelle affecte également la sor>e (par ex., suppression des
espaces inu>les ou ajout de sauts de ligne visuels).
• Usage :
• <div id="element" style="display: none;">
• <p>Bonjour <span>monde</span>!</p>
• </div>
• const element = document.getElementById("element");
• console.log(element.innerText); // ""
• element.style.display = "block";
• console.log(element.innerText); // "Bonjour monde!"

Modification :

element.innerText = "Nouveau texte visible";

console.log(element.innerText); // "Nouveau texte visible"
3. innerHTML

• Définition : Renvoie ou définit le contenu HTML complet d'un élément, y compris

ses balises enfants.
• Caractéristiques :
o Permet d'insérer ou de récupérer du contenu HTML dynamique.
o Traite les balises HTML (contrairement à textContent).
 o U>le pour ajouter des éléments ou du contenu structuré (balises).
• Usage :
• <div id="element">
• <p>Bonjour <span>monde</span>!</p>
• </div>
• const element = document.getElementById("element");
• console.log(element.innerHTML);
• // "<p>Bonjour <span>monde</span>!</p>"

Modification :

element.innerHTML = "<h1>Nouveau contenu HTML</h1>";

console.log(element.innerHTML); // "<h1>Nouveau contenu HTML</h1>"
Résumé des Différences
Inclut les styles CSS (visibilité) Inclut les balises
Propriété Texte brut ou HTML ?
? ?
textContent Texte brut (tous les nœuds) Non Non
innerText Texte brut visible Oui Non
HTML complet (avec
innerHTML N/A Oui
balises)
Exemple Combiné
<div id="example">
<p style="display: none;">Texte caché</p>
<p>Texte visible</p>
</div>
const element = document.getElementById("example");

console.log("textContent:", element.textContent);
// "Texte caché Texte visible"

console.log("innerText:", element.innerText);
// "Texte visible" (car "Texte caché" est masqué)

console.log("innerHTML:", element.innerHTML);
// "<p style="display: none;">Texte caché</p><p>Texte visible</p>"

MANIPULER LES ATTRIBUTS

En JavaScript, vous pouvez manipuler les attributs des éléments HTML à l'aide de plusieurs
méthodes et propriétés intégrées. Voici un guide complet pour les manipuler :

1. Accéder à un ALribut

Propriété Directe

Si l'attribut a une propriété correspondante (comme id, class, href, etc.), vous pouvez y
accéder directement :

const element = document.querySelector("#monElement");

console.log(element.id); // Accéder à l'attribut "id"
console.log(element.className); // Accéder à l'attribut "class"
console.log(element.href); // Accéder à l'attribut "href"
Méthode getAttribute

Pour accéder à n'importe quel attribut, même s'il n'a pas de propriété directe :

const element = document.querySelector("#monElement");

console.log(element.getAttribute("data-info")); // Exemple d'attribut
"data-info"
console.log(element.getAttribute("alt")); // Accéder à l'attribut
"alt"
2. Modifier un ALribut

Propriété Directe
const element = document.querySelector("#monElement");
element.id = "nouvelId"; // Modifier l'attribut "id"
element.className = "nouvelleClasse"; // Modifier l'attribut "class"

Méthode setAttribute

Pour définir ou modifier n'importe quel attribut :

const element = document.querySelector("#monElement");

element.setAttribute("data-info", "Nouvelle valeur"); // Modifier/ajouter
"data-info"
element.setAttribute("alt", "Description de l'image"); // Modifier/ajouter
"alt"
3. Supprimer un ALribut

Utilisez la méthode removeAttribute :

const element = document.querySelector("#monElement");

element.removeAttribute("data-info"); // Supprime l'attribut "data-info"
element.removeAttribute("alt"); // Supprime l'attribut "alt"
4. Vérifier la Présence d'un ALribut

Utilisez la méthode hasAttribute pour vérifier si un élément a un attribut donné :

const element = document.querySelector("#monElement");

console.log(element.hasAttribute("data-info")); // Renvoie true ou false
console.log(element.hasAttribute("alt")); // Renvoie true ou false
5. Manipuler les ALributs Personnalisés (data-*)

Les attributs personnalisés qui commencent par data- sont couramment utilisés pour stocker
des données.

Accéder à un attribut data-*

Vous pouvez utiliser getAttribute ou la propriété dataset :

const element = document.querySelector("#monElement");

// Avec getAttribute
console.log(element.getAttribute("data-info"));

// Avec dataset
console.log(element.dataset.info);

Modifier un attribut data-*

const element = document.querySelector("#monElement");

// Avec setAttribute
element.setAttribute("data-info", "nouvelleValeur");

// Avec dataset
element.dataset.info = "nouvelleValeur";

Supprimer un attribut data-*

const element = document.querySelector("#monElement");
element.removeAttribute("data-info");
6. Exemple Pra)que

Supposons que nous avons le HTML suivant :

<img id="image" src="photo.jpg" alt="Une belle photo" data-

category="nature">

Exemple de manipulation :
const image = document.getElementById("image");

// Accéder aux attributs

console.log(image.src); // "photo.jpg"
console.log(image.getAttribute("alt")); // "Une belle photo"
console.log(image.dataset.category); // "nature"

// Modifier les attributs

image.setAttribute("src", "nouvellePhoto.jpg");
image.alt = "Une autre belle photo";
image.dataset.category = "portrait";

// Supprimer un attribut
image.removeAttribute("data-category");

// Vérifier un attribut
if (image.hasAttribute("alt")) {
console.log("L'image a une description !");
}
7. Ajouter des Classes avec les ALributs

Les classes sont souvent manipulées via l'attribut class.

Ajouter, Supprimer, ou Basculer des Classes

Vous pouvez utiliser la propriété classList :

const element = document.querySelector("#monElement");

// Ajouter une classe

element.classList.add("nouvelleClasse");

// Supprimer une classe

element.classList.remove("ancienneClasse");

// Basculer une classe (ajoute si elle n'existe pas, sinon la supprime)

element.classList.toggle("classeActive");

// Vérifier la présence d'une classe

console.log(element.classList.contains("nouvelleClasse")); // true ou false
8. Exemple Avancé avec Événements

Imaginez un bouton qui change l'image lorsqu'on clique dessus :

<button id="changerImage">Changer l'image</button>

<img id="image" src="photo1.jpg" alt="Photo 1">

JavaScript :
const bouton = document.getElementById("changerImage");
const image = document.getElementById("image");

bouton.addEventListener("click", () => {
// Changer l'image
const nouvelleSrc = image.getAttribute("src") === "photo1.jpg"
? "photo2.jpg"
: "photo1.jpg";
image.setAttribute("src", nouvelleSrc);

// Modifier l'attribut alt

image.alt = nouvelleSrc === "photo1.jpg" ? "Photo 1" : "Photo 2";
});

CRÉER DU CONTENU AVEC LES TEMPLATES LITAERALS

En JavaScript, les template literals (ou littéraux de gabarit) permettent de créer facilement du
contenu dynamique grâce à leur syntaxe basée sur les backticks (``). Ils facilitent l'insertion de
variables, de valeurs dynamiques, et même la création de contenu HTML.

Voici comment les utiliser pour générer du contenu dynamique :

1. Syntaxe des Template Literals

Un template literal utilise :

• Les backIcks : `contenu`

• L'interpolaIon : ${expression} pour insérer des valeurs ou des expressions.

Exemple de Base
const nom = "Alice";
const age = 25;
const message = `Bonjour, je m'appelle ${nom} et j'ai ${age} ans.`;
console.log(message);
// Résultat : Bonjour, je m'appelle Alice et j'ai 25 ans.
2. Créer du Contenu HTML Dynamique

Les template literals sont parfaits pour générer du contenu HTML à la volée.

Exemple : Génération d'un Article

const titre = "Introduction aux Template Literals";
const auteur = "John Doe";
const contenu = "Les template literals permettent de créer du contenu
dynamique facilement.";

const article = `
<article>
<h1>${titre}</h1>
<p>Écrit par : ${auteur}</p>
<div>${contenu}</div>
</article>
`;

console.log(article);
// Insérer dans le DOM
document.body.innerHTML = article;
3. Boucles et Contenu Répété

Les template literals fonctionnent très bien avec des boucles pour générer des listes ou des
éléments répétés.

Exemple : Génération d'une Liste

const items = ["Pommes", "Bananes", "Oranges", "Poires"];

const liste = `
<ul>
${items.map(item => `<li>${item}</li>`).join("")}
</ul>
`;

console.log(liste);
// Insérer dans le DOM
document.body.innerHTML = liste;
4. U)lisa)on d'Expressions Dynamiques

Vous pouvez intégrer des expressions JavaScript directement dans les templates.

Exemple : Calcul Dynamique

const prixUnitaire = 20;
const quantite = 5;

const facture = `
<p>Prix unitaire : ${prixUnitaire}€</p>
 <p>Quantité : ${quantite}</p>
<p>Total : ${prixUnitaire * quantite}€</p>
`;

console.log(facture);
// Insérer dans le DOM
document.body.innerHTML = facture;
5. Fonc)ons et Template Literals

Les template literals peuvent appeler des fonctions pour générer des contenus plus complexes.

Exemple : Formater une Date

const formatDate = date => date.toLocaleDateString("fr-FR");

const date = new Date();

const message = `
<p>Aujourd'hui, nous sommes le ${formatDate(date)}.</p>
`;

console.log(message);
// Insérer dans le DOM
document.body.innerHTML = message;
6. Mul)lignes Sans Concaténa)on

Avec les template literals, il n'est pas nécessaire de concaténer les chaînes pour gérer les sauts
de ligne.

Exemple :
const message = `
<h1>Bienvenue !</h1>
<p>Ceci est un texte sur plusieurs lignes.</p>
<p>Aucun besoin de concaténation avec "+" ou "\\n".</p>
`;

console.log(message);
// Insérer dans le DOM
document.body.innerHTML = message;
7. Inclure des ALributs Dynamiques

Vous pouvez aussi insérer des valeurs dans les attributs HTML.

Exemple :
const imageUrl = "https://via.placeholder.com/150";
const altText = "Une image exemple";
const largeur = 150;
const hauteur = 150;

const imageHTML = `
<img src="${imageUrl}" alt="${altText}" width="${largeur}"
height="${hauteur}" />
`;
console.log(imageHTML);
// Insérer dans le DOM
document.body.innerHTML = imageHTML;
8. Exemple Avancé : Table Dynamique

Voici un exemple plus complexe générant une table HTML.

HTML :
<div id="conteneur"></div>

JavaScript :
const produits = [
{ nom: "Téléphone", prix: 599 },
{ nom: "Ordinateur", prix: 1299 },
{ nom: "Casque Audio", prix: 199 },
];

const tableau = `
<table border="1">
<thead>
<tr>
<th>Produit</th>
<th>Prix (€)</th>
</tr>
</thead>
<tbody>
${produits.map(produit => `
<tr>
<td>${produit.nom}</td>
<td>${produit.prix}</td>
</tr>
`).join("")}
</tbody>
</table>
`;

document.getElementById("conteneur").innerHTML = tableau;
9. Sécurité : Éviter les ALaques XSS

Lorsque vous insérez du contenu dynamique dans le DOM avec innerHTML, faites attention à
ne pas inclure de données non fiables (ex : données utilisateur). Une bonne pratique est
d'utiliser textContent pour éviter les attaques XSS.

Les template literals rendent le code plus lisible et simplifient la manipulation de contenu
HTML dynamique. Si vous avez un cas particulier ou besoin d'un exemple précis, n'hésitez
pas à demander ! 😊