Partie 3 : Manipuler les éléments d’une page avec DOM

Cette partie couvre les pages 123 à 173 du document.

1. Concepts & Définitions

DOM (Document Object Model) : Une interface de programmation (API) normalisée par le W3C. Son rôle est d'accéder au contenu du navigateur web et de le modifier en utilisant des scripts.
Arbre DOM : Le DOM représente un document HTML sous forme d’un arbre d'objets (un paragraphe, une image, un style, etc.). La modification du document HTML via le DOM consiste à ajouter ou supprimer des nœuds de cet arbre.
Nœud (Node) : Les éléments du DOM sont appelés des nœuds. Ils sont en relation hiérarchique.
Racine (Root Node) : Le nœud supérieur de l'arbre DOM.
Relations entre Nœuds :
- Parent / Child : Un nœud peut avoir des ascendants (parents) et des descendants (enfants).
- Nœuds ascendants : Les nœuds qui sont parents d’un nœud (ou parents d’un nœud parent).
- Nœuds descendants : Les nœuds qui sont enfants d’un nœud (ou enfants d’un nœud enfant).
- Sibling (Frère) : Nœuds qui partagent le même parent.
Objet document : Correspond à l’élément <html> de la page Web et constitue la racine du DOM. C'est une variable globale disponible en JavaScript.
Sélecteurs CSS : Patrons utilisés pour sélectionner les éléments que l'on souhaite styliser ou manipuler. JavaScript peut les utiliser pour trouver des éléments.
DOMMenu Object : Représente l'élément HTML <menu>. (Note : Cet élément n'est plus supporté par les principaux navigateurs).

2. Syntaxes & Codes

Création d'élément :
```
document.createElement(element)
```
Suppression d'un enfant :
```
document.removeChild(element)
```

Ajout d'un enfant :

document.appendChild(element)
parent.append(enfant) // Ajoute un objet comme dernier enfant

Remplacement d'un enfant :
```
document.replaceChild(new, old)
```
Écriture dans le document :
```
document.write(text)
```

Ajout d'un événement de clic :

document.getElementById(id).onclick = function(){code}

Recherche d'éléments :

document.getElementById(id)
document.getElementsByTagName(name)
document.getElementsByClassName(name)
document.querySelector(sélecteur CSS)
document.querySelectorAll(sélecteur CSS)

Mise à jour d'attribut :
```
element.setAttribute(nom, valeur)
```
Suppression d'attribut :
```
element.removeAttribute(nom)
```

Création d'un objet DOMMenu :

var menuObject = document.createElement("MENU")

3. Attributs & Propriétés

Propriétés de l'objet `document`

document.head : Retourne le nœud représentant l’élément <head>.
document.body : Retourne le nœud représentant l’élément <body>.
document.title : Retourne le titre (contenu de <title>).
document.links : Retourne une liste de tous les éléments <a> ou <area> possédant un attribut href.
document.url : Renvoie l’URL du document.
document.scripts : Retourne une liste de tous les éléments <script>.
document.cookie : Retourne la liste des cookies associés au document.

Propriétés des Éléments DOM

element.innerHTML : Permet de récupérer ou de définir tout le contenu HTML d'un élément.
element.textContent : Renvoie ou définit tout le contenu textuel d'un élément, sans le balisage HTML.
element.attribute : Permet de changer l'attribut d'un élément.
element.style.property : Permet de changer une propriété de style CSS d'un élément.
element.classList : Permet de récupérer la liste des classes d'un élément.
element.className : Permet de changer les paramètres de style en attribuant une nouvelle classe.
element.nodeType : Indique le type du nœud.
element.nodeName : Retourne le nom du nœud (ex: 'H1', '#text').

Propriétés de Navigation dans l'Arbre DOM

Navigation vers les enfants :
- firstChild : Retourne le premier enfant (peut être un nœud texte).
- firstElementChild : Retourne le premier enfant de type élément.
- lastChild : Retourne le dernier enfant (peut être un nœud texte).
- lastElementChild : Retourne le dernier enfant de type élément.
- childNodes : Retourne une collection de tous les enfants (y compris les nœuds texte et commentaires).
- children : Renvoie une collection des enfants qui sont de type élément.
Navigation vers les parents :
- parentNode : Renvoie le nœud parent de l'élément.
- parentElement : Renvoie l'élément parent de l'élément.
Navigation vers les frères (siblings) :
- nextSibling : Renvoie le nœud frère suivant (peut être un nœud texte).
- nextElementSibling : Renvoie l'élément frère suivant.
- previousSibling : Renvoie le nœud frère précédent (peut être un nœud texte).
- previousElementSibling : Renvoie l'élément frère précédent.

Attributs de l'objet DOMMenu

label : Prend une valeur textuelle, spécifie le label du menu.
type : Spécifie le type du menu à afficher. Valeurs possibles : list, toolbar, contex.

4. Exemples Pratiques

Recherche d'éléments (p. 130)

<!DOCTYPE html>
<html>
<head></head>
<body>
  <h1 id="p1" class="c1">cours DOM JS</h1>
  <p class="c1">1er paragraphe</p>
  <p class="c2">2ème paragraphe</p>
</body>
</html>

let e1=document.getElementById("p1");
console.log(e1); // <h1 id="p1" class="c1">cours DOM JS</h1>

let e2=document.getElementsByTagName("p");
console.log(e2); // HTMLCollection(2) [p.c1, p]

let e3=document.getElementsByClassName("c1");
console.log(e3); // HTMLCollection(2) [h1#p1.c1, p.c1]

Navigation `firstChild` vs `firstElementChild` (p. 139-140)

<div id="parent">
  <h1>Un titre</h1>
  <p>Un paragraphe</p>
</div>

// Avec espace entre <div> et <h1>
let elt = document.getElementById("parent");
let premElt = elt.firstChild;
console.log(premElt); // text node
console.log(premElt.nodeName); // #text

// firstElementChild ignore le nœud texte
let premEltElement = elt.firstElementChild;
console.log(premEltElement.nodeName); // H1

Manipulation d'éléments (Création, Ajout, Suppression, Remplacement) (p. 163-165)

// Créer un élément
let element1 = document.createElement('p'); // Crée <p></p>

// Attacher un élément
let parent = document.getElementById("parent");
let enfant = document.createElement("p");
enfant.innerHTML = "C’est un nouveau élément";
parent.append(enfant);

// Supprimer un élément
let enfantASupprimer = document.getElementById("eltSupp");
parent.removeChild(enfantASupprimer);

// Remplacer un élément
let ancienElement = document.getElementById("id1");
let nouvElement = document.createElement("h2");
nouvElement.innerHTML = "C’est le nouveau élément.";
parent.replaceChild(nouvElement, ancienElement);

Mise à jour de style et d'attributs (p. 167-170)

// Modifier le style directement
document.getElementsByClassName("style1")[0].style.borderColor = "red";

// Modifier le style via className
document.getElementsByClassName("style1")[0].className = "styleErreur";

// Ajouter/Modifier un attribut
let btn = document.getElementById("Btn");
btn.setAttribute("class", "style1");
btn.setAttribute("disabled", "");

// Supprimer un attribut
let lien = document.getElementById("lien");
lien.removeAttribute("href");

Exemple complet de `<menu>` (p. 173)

<menu type="context" id="monMenu">
  <menuitem label="Actualiser" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
  <menu label="Partager sur...">
    <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);"></menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);"></menuitem>
  </menu>
  <menuitem label="Envoyer cette page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

5. Spécifications Techniques

Hiérarchie des Nœuds : Chaque nœud a exactement un parent, à l'exception de la racine (document). Un nœud peut avoir plusieurs enfants.
nodeType :
- document.ELEMENT_NODE (valeur 1) pour un nœud "élément" (balise HTML).
- document.TEXT_NODE (valeur 3) pour un nœud textuel.
Nœuds Textuels : Les retours à la ligne et les espaces entre les balises dans le code HTML sont considérés par le navigateur comme des nœuds textuels. C'est la raison de la différence entre childNodes et children, ou firstChild et firstElementChild.
Parent de document : Le parent de l'élément document est null.
parentElement vs parentNode : document.documentElement.parentNode retourne l'objet document, tandis que document.documentElement.parentElement retourne null.
createElement() : La méthode convertit le nom de l'élément en minuscules (ex: createElement('DIV') crée un <div>).

6. Points Critiques

Attachement des éléments : Un élément créé avec createElement() n'est pas visible sur la page tant qu'il n'est pas attaché à l'arbre DOM à l'aide de méthodes comme appendChild() ou append().
childNodes vs children : C'est un point de confusion fréquent. childNodes inclut tous les types de nœuds (éléments, texte, commentaires), tandis que children n'inclut que les nœuds de type élément. Pour une manipulation fiable des balises, children est souvent préférable.
...Sibling vs ...ElementSibling : Même distinction que ci-dessus. Les versions ...ElementSibling sont plus directes pour naviguer entre les balises HTML, en ignorant les nœuds texte intermédiaires.
Collections getElementsBy... : Les méthodes getElementsByTagName et getElementsByClassName retournent des collections HTML (live collections), pas des tableaux statiques. Elles se mettent à jour automatiquement si le DOM change. Pour y accéder, il faut utiliser un index (ex: [0]).
Dépréciation de <menu> : L'objet DOMMenu et la balise <menu> sont obsolètes et ne doivent pas être utilisés en production car ils ne sont plus supportés par les navigateurs modernes.

🔗 Navigation

Partie 3 : Manipuler les éléments d’une page avec DOM

1. Concepts & Définitions

2. Syntaxes & Codes

3. Attributs & Propriétés

Propriétés de l'objet document

Propriétés des Éléments DOM

Propriétés de Navigation dans l'Arbre DOM

Attributs de l'objet DOMMenu

4. Exemples Pratiques

Recherche d'éléments (p. 130)

Navigation firstChild vs firstElementChild (p. 139-140)

Manipulation d'éléments (Création, Ajout, Suppression, Remplacement) (p. 163-165)

Mise à jour de style et d'attributs (p. 167-170)

Exemple complet de <menu> (p. 173)

5. Spécifications Techniques

6. Points Critiques

Propriétés de l'objet `document`

Navigation `firstChild` vs `firstElementChild` (p. 139-140)

Exemple complet de `<menu>` (p. 173)