Voici quelques titres de questions-réponses en anglais qui correspondent au contenu de votre article : Titre plus concis : * Quelle est la différence entre les HTMLCollections, les NodeLists et les tableaux d'objets dans le DOM ? * Collections DOM : HTMLCollections, NodeLists et Arrays - Qu'est-ce que c'est ?

Comprendre les différences entre les HTMLCollections, les NodeLists et les tableaux d'objets dans le DOM

Lorsque vous travaillez avec le DOM, trois types clés de collections entrent en jeu : HTMLCollections, NodeLists et tableaux d’objets. Chacune de ces collections répond à un objectif spécifique et possède ses propres caractéristiques uniques.

HTMLCollections vs. NodeLists

HTMLCollections représentent des collections d'éléments HTML qui correspondent à un nom de balise spécifique. Ils sont renvoyés par la méthode getElementsByTagName() de l'objet Document. Les HTMLCollections sont live, ce qui signifie qu'elles reflètent automatiquement toutes les modifications apportées au DOM. Ils fournissent également un accès direct aux éléments individuels par index.

NodeLists, quant à eux, sont des collections de tout type de nœud (y compris les éléments HTML, les nœuds de texte et les commentaires). Ils sont renvoyés par diverses méthodes DOM, telles que querySelectorAll() et childNodes(). Les NodeLists sont statiques, ce qui signifie qu'elles ne reflètent pas les modifications dans le DOM à moins qu'elles ne soient explicitement mises à jour.

Objets jQuery par rapport aux HTMLCollections et NodeLists

Les objets jQuery ne sont pas directement liés aux HTMLCollections ou des listes de nœuds. Les objets jQuery sont des objets JavaScript qui encapsulent les sélections DOM. Ils fournissent une interface pratique pour manipuler les éléments DOM et améliorer leurs fonctionnalités à l'aide de l'API riche de jQuery.

Les sélections jQuery peuvent inclure des éléments, des nœuds de texte ou tout autre type de nœud. Comme NodeLists, les sélections jQuery sont statiques. Cependant, ils peuvent être convertis en HTMLCollections live à l'aide de la méthode $(...).live() de jQuery.

Tableaux et collections JavaScript

En plus des HTMLCollections et NodeLists, vous pouvez également créer tableaux d'objets en JavaScript. Par exemple, vous pouvez stocker des éléments du DOM dans un tableau comme suit :

<code class="javascript">const elements = [document.getElementById("myElement1"), document.getElementById("myElement2")];</code>

Les tableaux en JavaScript sont dynamiques et ne reflètent pas les modifications apportées au DOM. Ils ne donnent pas non plus accès à des méthodes spécifiques telles que HTMLCollections ou des objets jQuery.

Exemple et démonstration

Le script suivant montre les principales différences entre ces types de collections :

<code class="javascript">$(function(){
    console.log('[123,&quot;abc&quot;,321,&quot;cba&quot;]=',[123,&quot;abc&quot;,321,&quot;cba&quot;]);
    console.log('{123:123,abc:&quot;abc&quot;,321:321,cba:&quot;cba&quot;}=',{123:123,abc:&quot;abc&quot;,321:321,cba:&quot;cba&quot;});
    console.log('Node=',Node);
    console.log('document.links=',document.links);
    console.log('document.getElementById(&quot;myTable&quot;)=',document.getElementById(&quot;myTable&quot;));
    console.log('document.getElementsByClassName(&quot;myRow&quot;)=',document.getElementsByClassName(&quot;myRow&quot;))
    console.log('document.getElementsByTagName(&quot;td&quot;)=',document.getElementsByTagName(&quot;td&quot;));
    console.log('$(&quot;#myTable&quot;)=',$(&quot;#myTable&quot;));
    console.log('$(&quot;td&quot;)=',$(&quot;td&quot;));
});</code>

Ce script enregistre la sortie suivante :

[123,"abc",321,"cba"]=[123, "abc", 321, "cba"]
{123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...}
Node= undefined
document.links= HTMLCollection[a #, a #]
document.getElementById("myTable")= <table>
document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow]
document.getElementsByTagName("td")= HTMLCollection[td, td, td, td]
jQuery("#myTable")= [table#myTable]
jQuery("td")= [td, td, td, td]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!