Conseils et techniques DOM: parent, enfant et frères et sœurs

Les applications Web modernes impliquent souvent un HTML complexe et riche en majoration. Des bibliothèques comme JQuery simplifient la manipulation DOM, offrant une compatibilité entre les navigateurs et une large gamme de fonctionnalités. Cependant, les API DOM natifs sont significativement améliorées par rapport à il y a quelques années, ce qui en fait une alternative viable dans de nombreux cas. Cet article explore les principales fonctionnalités DOM pour manipuler les HTML, en se concentrant sur les relations entre les parents, les enfants et les frères et sœurs. Alors que jQuery reste un choix populaire en raison des incohérences historiques, la compréhension des méthodes DOM natives est cruciale pour un développement efficace.

Concepts clés:

• compter efficacement les éléments enfants en utilisant les propriétés children et childElementCount, en évitant l'inclusion de nœuds non élémentaires (comme childNodes.length pourrait).
• Utiliser hasChildNodes() pour vérifier tous les nœuds enfants, y compris les espaces blancs (un type de nœud valide).
• Ajouter ou repositionner les éléments avec appendChild() et les supprimer en utilisant removeChild() ou ChildNode.remove().
• Remplacez de manière transparente les éléments enfants en utilisant replaceChild(), permettant d'échanger et de repositionner les éléments.
• cibler les enfants spécifiques avec firstElementChild, lastElementChild, nextElementSibling et previousElementSibling pour une manipulation DOM précise.

Compter les nœuds enfants:

Considérez cet exemple HTML (utilisé tout au long de l'article):

<code class="language-html"><ul id="myList">
  <li>Example one</li>
  <li>Example two</li>
  <li>Example three</li>
  <li>Example four</li>
  <li>Example five</li>
  <li>Example six</li>
</ul></code>

pour compter les éléments dans le <code><ul></ul> :

<code class="language-javascript">var myList = document.getElementById('myList');
console.log(myList.children.length); // 6
console.log(myList.childElementCount); // 6</code>

children.length et childElementCount donnent le même résultat (6). childElementCount est souvent préféré pour sa clarté. L'utilisation childNodes.length renverrait un nombre plus élevé, car il inclut tous les types de nœuds, y compris les espaces blancs.

Vérification des nœuds enfants:

hasChildNodes() Renvoie un booléen indiquant la présence de nœuds enfants:

<code class="language-javascript">console.log(myList.hasChildNodes()); // true</code>

Même un vide <code><ul></ul> avec Whitespace retournera true. Seul un complètement vide <code><ul></ul> (pas d'espace blanc) retournera false.

Ajout et supprimer des éléments:

appendChild() Ajoute des éléments nouveaux ou déplace les éléments existants. Par exemple, déplacer le <code><ul></ul> :

<code class="language-javascript">// ... (Assuming a containing div with id "container") ...
var myList = document.getElementById('myList');
document.getElementById('container').appendChild(myList);</code>

removeChild() supprime un nœud enfant. ChildNode.remove() fournit une alternative plus concise (non prise en charge dans IE plus ancienne).

Remplacement des éléments:

replaceChild() remplace un enfant par un autre:

<code class="language-javascript">var myPar = document.getElementById('par'),
    myDiv = document.createElement('div');
myDiv.textContent = 'New element';
document.body.replaceChild(myDiv, myPar);</code>

Cela remplace le <p id="par"></p> par le nouveau <div>. <p> <strong> Cibler des enfants spécifiques: </strong> </p> <p> <code>firstElementChild, lastElementChild, nextElementSibling, et previousElementSibling permettent un ciblage précis des enfants spécifiques.

Injection de contenu:

insertBefore() Insère un élément avant un frère spécifié. insertAdjacentHTML() offre un contrôle plus précis sur les points d'insertion (beforebegin, afterbegin, beforeend, afterend).

Prise en charge du navigateur:

La plupart des méthodes ont un excellent support de navigateur, y compris des versions IE plus anciennes. ChildNode.remove() manque de soutien dans les anciens, c'est-à-dire

Conclusion:

Bien que jQuery simplifie la manipulation DOM, la compréhension des API DOM natives est essentielle pour le développement Web efficace et moderne. Des tests approfondis sont cruciaux pour tenir compte des incohérences potentielles du navigateur.