Eloquent JavaScript - Traduction Fidèle (Partie
DOM)
Le Document Object Model (DOM) Le DOM est une interface de programmation qui représente un
document HTML sous forme d’arbre d’objets. Chaque balise devient un nœud dans cet arbre, et
JavaScript peut interagir avec ces nœuds pour lire ou modifier la page. Par exemple, un document
HTML simple : TitreTexte sera représenté comme une structure hiérarchique avec des objets
imbriqués.
→ Sélectionner des éléments - [Link]('id') : sélectionne un élément par son
identifiant. - [Link]('tag') : sélectionne tous les éléments d’un type
donné. - [Link]('classe') : sélectionne par classe. -
[Link]('sélecteurCSS') : premier élément correspondant. -
[Link]('sélecteurCSS') : liste de tous les éléments correspondants.
// Exemple : Sélectionner et modifier le contenu d’un élément
let titre = [Link]('monTitre');
[Link] = 'Nouveau titre';
→ Modifier le contenu et le style - [Link] = 'Texte' : change le texte interne. -
[Link] = 'Texte' : change le contenu HTML. - [Link]été = 'valeur' :
modifie le style CSS directement. - [Link]('classe') / remove('classe') /
toggle('classe') : ajoute, retire ou alterne une classe CSS.
// Exemple : changer la couleur d’un paragraphe
let p = [Link]('p');
[Link] = 'red';
→ Créer et supprimer des éléments - [Link]('tag') : crée un nouvel élément. -
[Link](element) : ajoute un enfant. - [Link](nouveau, reference) : insère
avant un autre élément. - [Link]() : supprime un élément.
// Exemple : ajouter un nouvel élément
let nouveauParagraphe = [Link]('p');
[Link] = 'Texte ajouté dynamiquement';
[Link](nouveauParagraphe);