Points de base

• nodelist.js, comme alternative à l'opération DOM pour jQuery, offre des fonctionnalités similaires, mais est plus petite (4k après la compression) et profite des améliorations à l'API du navigateur natif.

• Contrairement à jQuery, Nodelist.js traite les tableaux de n?uds comme des n?uds uniques, permettant du code plus propre et des opérations d'objets Nodelist plus faciles.

• nodelist.js contient des méthodes spéciales pour définir et obtenir des attributs, appeler des méthodes spécifiques aux éléments et accéder aux n?uds dans Nodelist, et l'attribut prevObject équivalent à l'attribut owner de jQuery.

• Nodelist.js est compatible avec les navigateurs grand public après une version spécifique (Firefox 6, Safari 5.0.5, Chrome 6, IE 9, Opera 11.6), et est automatiquement mis à jour pour inclure de nouvelles méthodes / propriétés ajoutées par le navigateur.

  p.tip { Color en arrière-plan: RGBA (128,128,128,0.05); Border-top-droite-radius: 5px; Border-Bottom-droite-radius: 5px; rembourrage: 15px 20px; Border-Left: 10px RGBA solide (128,128,128,0.075); }

Ces dernières années, JQuery est devenu la bibliothèque JavaScript de facto sur le Web. Il supprime de nombreuses incohérences croisées et ajoute une couche de sucre syntaxique populaire aux scripts clients. L'un de ses principaux points de douleur dans le traitement d'abstraction est les opérations DOM, mais depuis l'avènement de JQuery, les API de navigateur indigène ont été considérablement améliorées, et le concept de "You Neey Need JQuery" est devenu populaire.

Les raisons sont les suivantes:

1. jQuery contient de nombreuses fonctionnalités dont vous n'avez pas besoin ou d'utiliser (et donc il n'est pas nécessaire d'être énorme).
2. jQuery prend trop de fonctions pour trop de gens. Généralement, les petites bibliothèques peuvent mieux effectuer des taches.
3. En termes d'opérations DOM, l'API du navigateur peut désormais remplir la plupart des fonctions de jQuery.
4. L'API du navigateur est désormais plus synchronisée, par exemple en utilisant addEventListener au lieu de attachEvent.

quel est le problème?

Le problème est que l'utilisation de JavaScript native (ou pur) pour DOM peut être gênante par rapport à jQuery. En effet, vous devez écrire un code plus redondant et gérer le nodeliste inutile du navigateur.

Tout d'abord, jetons un coup d'?il à la définition de MDN de Nodelist:

L'objet

NodeList est une collection de n?uds, tels que ceux renvoyés par les méthodes Node.childNodes et document.querySelectorAll.

Il y a parfois dynamique nodelist (ce qui peut être déroutant):

Dans certains cas, NodeList est une collection dynamique, ce qui signifie que les changements dans le DOM se reflètent dans la collection. Par exemple, Node.childNodes est dynamique.

Cela peut être un problème car vous ne pouvez pas dire lesquels sont dynamiques et lesquels sont statiques. Sauf si vous supprimez chaque n?ud du nodeliste, puis vérifiez si le Nodelist est vide. S'il est vide, vous avez un nodeliste dynamique (c'est juste une mauvaise idée).

De plus, le navigateur ne fournit aucune méthode utile pour manipuler ces objets nodelist.

Par exemple, malheureusement, il n'est pas possible de traverser les n?uds en utilisant forEach

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 錯誤：nodes.forEach 不是函數(shù)

Par conséquent, vous devez faire ce qui suit:

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

ou même utiliser uniquement "hack":

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

Le nodelist natif du navigateur n'a qu'une seule méthode:

. Il renvoie un n?ud de NodeList via l'index. Lorsque nous pouvons accéder au n?ud comme nous utilisons un tableau (en utilisant item), il est complètement inutile: array[index]

var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true

C'est là que Nodelist.js est disponible - ce qui rend aussi facile de faire fonctionner un DOM à l'aide d'une API native du navigateur que l'utilisation de jQuery, mais nécessite uniquement la taille de compression 4K.

Solution

J'ai créé Nodelist.js parce que j'utilise des API DOM natifs, mais je veux les rendre plus concises, réduisant ainsi beaucoup de redondance lors de l'écriture de code (comme pour les boucles).

Nodelist.js est un wrapper pour l'API DOM natif qui vous permet de manipuler des tableaux de n?uds (c'est-à-dire mon nodelist) comme s'il s'agissait d'un seul n?ud. Cela vous donne plus de fonctionnalités que l'objet NodeList natif du navigateur.

Si vous pensez que c'est bon, obtenez une copie de Nodelist.js du référentiel Github officiel et continuez à lire le reste de ce tutoriel.

Utilisation:

La sélection d'un n?ud DOM est simple:

// Retour à mon nodelist $$(selector);

Cette méthode est utilisée dans l'arrière-plan

. querySelectorAll(selector)

Mais comment se compare-t-il à jQuery?

Heureux que vous ayez posé cette question. Comparons les JS, JQuery et Nodelist.js indigènes.

Supposons que nous ayons trois boutons:

Changeons le texte de chaque bouton pour "cliquez sur moi":

JS natif:

var buttons = document.querySelectorAll('button'); // 返回瀏覽器無用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}

jQuery:

$('button').text('Click Me');

nodelist.js:

$$('button').textContent = 'Click Me';

Ici, nous voyons que Nodelist.js peut traiter efficacement Nodelist comme un seul n?ud. Autrement dit, nous faisons référence à un Nodelist et définissons sa propriété

pour "cliquer sur moi". Nodelist.js exécute ensuite cela pour chaque n?ud du nodelist. Très intelligent, non? textContent

Si nous voulons une cha?ne de méthodes (similaire à jQuery), nous effectuons ce qui suit, qui renvoie une référence à Nodelist:

$$('button').set('textContent', 'Click Me');

Maintenant, ajoutons un écouteur d'événements de clic à chaque bouton:

JS natif:

var buttons = document.querySelectorAll('button'); // 返回瀏覽器無用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    this.classList.add('clicked');
  });
}

jQuery:

$('button').on('click', function() {
  $(this).addClass('click');
  // 或?qū)?jQuery 與原生混合使用 `classList`：
  this.classList.add('clicked');
});

nodelist.js:

$$('button').addEventListener('click', function() {
  this.classList.add('clicked');
});

D'accord, donc la méthode

de jQuery est assez bonne. Ma bibliothèque utilise l'API DOM native du navigateur (d'où on), mais cela ne nous empêche pas de créer un alias pour la méthode: addEventListener

$$.NL.on = $$.NL.addEventListener;

$$('button').on('click', function() {
  this.classList.add('clicked');
});

Pas mal! Cela montre comment nous ajoutons notre propre méthode:

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 錯誤：nodes.forEach 不是函數(shù)

NodeList.js Prise en charge des méthodes de tableau

nodelist.js hérite de Array.prototype, mais pas directement, car certaines méthodes ont été modifiées, il est donc logique de les utiliser avec Nodelist (tableau de n?uds).

push et unshift

par exemple: push et unshift Les méthodes ne peuvent prendre que des n?uds comme paramètres, sinon une erreur sera lancée:

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

donc à la fois push et unshift renvoie nodelist pour permettre le cha?nage de méthode, ce qui signifie qu'il est différent de la méthodes natives Array#push ou Array#unshift de JavaScript, qui acceptent n'importe quoi et renvoient la nouvelle longueur du tableau. Si nous voulons la longueur de Nodelist, nous avons juste besoin d'utiliser la propriété length.

Ces deux méthodes, comme la méthode du tableau native de JavaScript, modifient le nodelist.

concat

concat La méthode accepte les paramètres suivants:

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

concat est une méthode récursive, donc ces tableaux peuvent être aussi profonds que nous le souhaiterions et seront aplatis. Cependant, si un élément du tableau passé n'est pas un n?ud, un nodelist ou un htmlcollection, il lancera une erreur.

concat Renvoie un nouveau nodelist, tout comme la méthode Array#concat de JavaScript.

pop, shift, map, slice, filter,

,

Les méthodes pop shift et Array#pop peuvent prendre des paramètres facultatifs, indiquant le nombre de n?uds à pop ou passer du nodelist. Contrairement à Native de JavaScript Array#shift ou

, ce dernier appara?t ou déplace toujours un élément dans le tableau indépendamment de ce qui est passé en tant que paramètre.

map Si chaque valeur mappée est un n?ud, la méthode

renvoie un nodelist; sinon, il renvoie un tableau de valeurs mappées.

Les méthodes slice filter et

font de même que dans les tableaux réels, mais renvoient un nodeliste.

Array.prototype étant donné que nodelist.js n'hérite pas directement de Array.prototype, si vous ajoutez une méthode à

lors du chargement de nodelist.js, il ne sera pas hérité.

Vous pouvez afficher les méthodes de tableau restantes de nodelist.js ici.

Méthode spéciale

owner nodelist.js a quatre méthodes uniques, et une propriété appelée prevObject, ce qui équivaut à l'attribut

de jQuery.

get set et

Méthode:

href Certains éléments ont des attributs spécifiques aux éléments de ce type (par exemple, l'attribut $$('a').href sur la balise d'ancrage). C'est pourquoi get retournera indéfini - car ce n'est pas une propriété héritée par chaque élément de Nodelist. C'est ainsi que nous utilisons la méthode

pour accéder à ces propriétés:

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 錯誤：nodes.forEach 不是函數(shù)

La méthode

set peut être utilisée pour définir ces propriétés pour chaque élément:

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

set Renvoie également NodeList pour permettre le cha?nage de méthode. Nous pouvons l'utiliser dans textContent etc. (les deux équivalents):

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

Nous pouvons également définir plusieurs propriétés en un seul appel:

var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true

Toutes les opérations ci-dessus peuvent être effectuées en utilisant n'importe quel attribut, par exemple style:

var buttons = document.querySelectorAll('button'); // 返回瀏覽器無用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}

call Méthode

La méthode

call vous permet d'appeler des méthodes spécifiques à l'élément (par exemple, pause sur un élément vidéo):

$('button').text('Click Me');

item Méthode

La méthode

item est équivalente à la méthode eq de jQuery. Il renvoie un nodeliste qui ne contient que les n?uds passant l'index:

$$('button').textContent = 'Click Me';

owner Attributs

L'attribut

owner est équivalent au prevObject de jQuery.

$$('button').set('textContent', 'Click Me');

btns.style Renvoie un tableau de style, tandis que owner renverra le nodeliste mappé par style.

NodeList.js Compatibilité

Ma bibliothèque est compatible avec tous les nouveaux navigateurs principaux comme décrit ci-dessous.

Navigateur Version Firefox 6 safari 5.0.5 chrome 6 ie 9 opéra 11.6 Conclusion

Maintenant, nous pouvons enfin utiliser l'objet NodeList utile!

Pour une taille de compression d'environ 4k, vous obtenez tout ce qui précède et plus, que vous pouvez apprendre dans le référentiel GitHub de Nodelist.js.

Puisque Nodelist.js utilise un navigateur comme dépendance, aucune mise à niveau n'est requise. Chaque fois que le navigateur ajoute de nouvelles méthodes / attributs à l'élément DOM, vous pouvez utiliser ces méthodes / attributs automatiquement via nodelist.js. Tout cela signifie que la seule dépréciation dont vous devez vous soucier est la méthode de suppression du navigateur. Ce sont généralement des méthodes d'utilisation très faibles car nous ne pouvons pas casser le Web.

Alors, qu'en pensez-vous? Envisageriez-vous d'utiliser cette bibliothèque? Des fonctionnalités importantes manquent-elles? J'adorerais entendre vos commentaires dans les commentaires ci-dessous.

Possément posé des questions sur les opérations DOM avec nodelist.js

Quelle est la différence entre nodelist et htmlcollection?

nodelist et htmlcollection sont les deux collections de n?uds. La principale différence entre eux est que NodeList peut contenir n'importe quel type de n?ud, tandis que HTMLCollection est une collection de n?uds d'élément. HTMLCollection est également dynamique, ce qui signifie qu'elle sera mise à jour automatiquement lorsque la structure du document change. Nodelist, en revanche, est statique et ne met pas à jour pour refléter les modifications du document.

Comment convertir Nodelist en un tableau?

Vous pouvez convertir Nodelist en un tableau à l'aide de la méthode

ou de l'opérateur d'extension. Voici comment le faire:

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 錯誤：nodes.forEach 不是函數(shù)

Pourquoi le sélecteur jQuery renvoie-t-il le prévOBJET au lieu d'un élément normal?

Le mécanisme de cha?nage de jQuery fonctionne en stockant des objets précédents avant d'apporter des modifications. Cela vous permet d'utiliser la méthode .end() pour restaurer votre état précédent. Si vous souhaitez obtenir l'élément DOM réel, vous pouvez utiliser la méthode ou la notation du tableau. .get()

Comment faire une boucle à travers Nodelist?

Vous pouvez traverser le Nodelist en utilisant la boucle FOR, pour ... de la boucle ou

Méthode. Voici un exemple utilisant une boucle pour la boucle: forEach()

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

à quoi sert la méthode .Prev () dans jQuery?

La méthode

dans jQuery est utilisée pour sélectionner l'élément sélectionné immédiatement à c?té de la frères et s?urs précédents. Si un sélecteur est fourni, l'élément frères précédent n'est récupéré que lorsque le sélecteur est apparié. .prev()

JQUERY est-il toujours pertinent en 2022?

Alors que JQuery changeait la donne au lancement, l'écosystème JavaScript moderne a considérablement changé. Beaucoup de fonctionnalités qui rendent JQuery populaire sont maintenant intégrées à JavaScript elle-même. Cependant, JQuery est encore largement utilisé et entretenu, et cela peut être un bon choix pour certains projets.

Comment sélectionner un n?ud spécifique de NodeList?

Vous pouvez sélectionner un n?ud spécifique dans NodeList à l'aide de la notation du tableau ou de la méthode

. Voici comment le faire: item()

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

Puis-je utiliser la carte, le filtre et réduire les méthodes sur Nodelist?

NodeList n'est pas un tableau, il n'a donc pas de méthodes comme la carte, le filtre et la réduction. Cependant, vous pouvez convertir Nodelist en un tableau, puis utiliser ces méthodes.

Quelle est la différence entre QueySelector et QuerySelectorall?

Renvoie le premier élément du document qui correspond au sélecteur CSS spécifié, et querySelector renvoie le nodeliste de tous les éléments qui correspondent au sélecteur CSS. querySelectorAll

Comment vérifier si Nodelist est vide?

Vous pouvez vérifier si NodeList est vide en vérifiant sa propriété

. Si la longueur est 0, Nodelist est vide. Voici comment le faire: length

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!