Maison >interface Web >js tutoriel >JavaScript vs jQuery HTML Collections

JavaScript vs jQuery HTML Collections

Jennifer Anistonoriginal: 2025-03-03 00:29:10908parcourir

Les objets htmlCollection sont renvoyés à partir de document.getElementsByTagName , document.getElementsByName et document.getElementsByClassName Methods (non pris en charge dans tous les navigateurs) . Superficiellement, ils sont similaires aux tableaux car ils ont une propriété de longueur et les éléments peuvent être accessibles par [index]. Cependant, ce ne sont pas des tableaux; Des méthodes telles que push (), slice () et tri () ne sont pas prises en charge. Considérez le document HTML suivant:

<body>
	<p>Paragraph 1</p>
	<p>Paragraph 2</p>
	<p>Paragraph 3</p>
</body>

Saisissons chaque nœud de paragraphe à l'aide de GetElementsByTagname et un sélecteur jQuery:

var pCollection = document.getElementsByTagName("p");
var pQuery = $("p");

console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);

Les deux renvoient les mêmes nœuds pour que la longueur de collection soit 3:

pCollection.length: 3
pQuery.length: 3

Nous allons maintenant ajouter un autre élément de paragraphe au document et regarder à nouveau les collections:

// add new paragraph
var newp = document.createElement("p");
newp.appendChild(document.createTextNode("Paragraph 4"));
document.body.appendChild(newp);
// 
// display length
console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);

Le résultat:

pCollection.length: 4
pQuery.length: 3

Les objets htmlCollection sont live . Ils sont automatiquement mis à jour chaque fois que le document sous-jacent change. jQuery et la plupart des autres bibliothèques JavaScript utilisent des méthodes telles que document.getElementsByTagName () mais copiez les nœuds résultants dans un tableau réel. Par conséquent, c'est une requête sur l'état du document à ce moment-là: elle n'est jamais mise à jour. Il existe des avantages et des inconvénients avec les deux méthodes. Par exemple, le code suivant provoque une boucle infinie puisque la longueur HTMLCollection augmente à mesure que les éléments

sont ajoutés:

var pCollection = document.getElementsByTagName("p");
for (var i = 0; i < pCollection.length; i++) {
	document.body.appendChild(pCollection[i].cloneNode(true));
}

Cela dit, il peut y avoir des situations où une htmlcollection en direct indigène plus rapide et native est plus utile qu'une collection statique de nœuds jQuery ou faisant à plusieurs reprises la même sélection. Heureusement, nous pouvons transmettre n'importe quelle collection à jQuery lorsque nous voulons la manipuler, par ex.

var pCollection = document.getElementsByTagName("p");
// ... add nodes, do work, etc ...
$(pCollection).addClass("myclass");

JQuery et d'autres bibliothèques peuvent supprimer l'effort de développement, mais vérifiez toujours s'il est possible d'écrire du code plus efficace dans un vieux JavaScript simple sans encourir de demandes de fichiers supplémentaires et de traitement des frais généraux.

Des questions fréquemment posées sur JavaScript vs jQuery HTML Collections

Quelle est la principale différence entre JavaScript et JQuery lorsqu'ils traitent des collections HTML?

JavaScript et JQuery sont tous deux des outils puissants pour manipuler les collections HTML, mais elles traitent ces tâches de différentes manières. JavaScript est un langage de programmation qui interagit directement avec les collections HTML, permettant plus de contrôle et de flexibilité. Cependant, il peut être plus complexe et nécessite une compréhension plus profonde de la langue. D'un autre côté, JQuery est une bibliothèque JavaScript qui simplifie de nombreuses tâches, notamment la gestion des collections HTML. Il fournit des méthodes faciles à utiliser pour manipuler des éléments HTML, mais il peut ne pas offrir le même niveau de contrôle que le JavaScript pur.

Comment puis-je convertir une collection HTML en un tableau en javascript?

En JavaScript, vous pouvez convertir une collection HTML en un tableau utilisant la méthode Array.from () ou l'opérateur de diffusion. Voici un exemple en utilisant array.from ():
let collection = Document.getElementsByClassName ('Exemple');
Laissez Array = Array.From (Collection);
et voici un exemple en utilisant l'opérateur de diffusion:
Laissez la collection = Document.getElementsByClassName ('Exemple');
Une collection HTML dans jQuery?

En jQuery, vous pouvez utiliser la méthode .Each () pour itérer sur une collection HTML. Voici un exemple:

$ ('. Exemple'). Chaque (fonction (index, élément) {

console.log (index, élément);
});
Cela enregistrera l'index et l'élément pour chaque élément de la collection.

Puis-je utiliser des méthodes jQuery sur une collection HTML par une méthode javascript? Méthodes sur une collection HTML renvoyée par une méthode JavaScript. En effet, les méthodes JavaScript renvoient les collections HTML, tandis que les méthodes jQuery renvoient les objets jQuery. Cependant, vous pouvez convertir la collection HTML en un objet jQuery en utilisant la fonction jQuery $ (), comme:

Laissez collection = document.getElementsByClassName ('Exemple');

Laissez jQueryObject = $ (collection);

Dans JavaScript et JQuery, vous pouvez accéder aux éléments individuels dans une collection HTML en utilisant la notation du support, similaire à la façon dont vous accèderiez aux éléments dans un tableau. Par exemple, pour accéder au premier élément d'une collection, vous utiliseriez la collection [0].

Puis-je modifier des éléments dans une collection HTML?

Oui, vous pouvez modifier des éléments dans une collection HTML dans JavaScript et JQuery. En javascript, vous pouvez directement modifier les propriétés des éléments, tandis que dans jQuery, vous pouvez utiliser des méthodes comme .css (), .attr () et .html () pour modifier les éléments.

collection. Dans JavaScript, vous pouvez convertir la collection en un tableau, puis utiliser la méthode .filter ().

Puis-je utiliser des méthodes de tableau sur une collection HTML?

Non, vous ne pouvez pas utiliser directement des méthodes de tableau sur une collection HTML car ce n'est pas un tableau. Cependant, vous pouvez convertir la collection en un tableau à l'aide de Array.From () ou de l'opérateur de diffusion, puis d'utiliser des méthodes de tableau.

Comment puis-je ajouter des éléments à une collection HTML?

Vous ne pouvez pas ajouter directement des éléments à une collection HTML car il s'agit d'une collection en direct qui se met à jour lorsque le document change. Cependant, vous pouvez ajouter des éléments au document, et ils seront automatiquement inclus dans la collection s'ils correspondent au sélecteur.

Puis-je utiliser la méthode .map () sur une collection HTML?

Non, vous ne pouvez pas utiliser directement la méthode .map () sur une collection HTML car ce n'est pas un tableau. Cependant, vous pouvez convertir la collection en un tableau à l'aide de Array.from () ou de l'opérateur d'écart, puis d'utiliser la méthode .map () dessus.

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!

JavaScript jquery css html Static Array Object if sort for while Filter using Length operator Property Collection copy map console function this Access Other

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：10 applications Android gratuites pour les développeurs WebArticle suivant：10 applications Android gratuites pour les développeurs Web

Articles Liés

Voir plus