NodeJS utilise le sélecteur jQuery pour faire fonctionner DOM_jquery

Remarque* Il s'agit d'un "ancien" projet de plus de deux ans, qui permet d'utiliser le sélecteur de jQuery dans NodeJS pour faire fonctionner le back-end HTML/XML comme le front-end DOM Après avoir supprimé le code lié à la compatibilité du navigateur. , Les opérations sont 8 fois plus rapides que JSDOM Nous avons déjà mentionné que JSDOM présente de sérieux problèmes de performances : Debug Node.JS : Comment localiser les fuites de mémoire et les boucles infinies

joyeux

Rapide, flexible, utilisant jQuery côté serveur.

Présentation

Testez votre HTML côté serveur :

Copier le code Le code est le suivant :

var cheerio = require('cheerio'),
$ = cheerio.load('

Bonjour tout le monde

');
$('h2.title').text('Bonjour !');
$('h2').addClass('bienvenue');
$.html();
//=>

Bonjour !

Installer

npm installer cheerio

Fonction

❤ Syntaxe familière : Cheerio implémente un sous-ensemble du noyau jQuery. Cheerio supprime toutes les incohérences DOM et la compatibilité des navigateurs de la bibliothèque jQuery, présentant ainsi son API vraiment magnifique.

ϟ Extrêmement rapide : Cheerio utilise un modèle DOM très simple et cohérent. Cela se traduit par des gains de performances incroyables pour l'analyse, la manipulation et le rendu. Des tests préliminaires de bout en bout montrent que Cheerio est environ 8 fois plus rapide que JSDOM.

❁Flexibilité incroyable : compatible avec htmlparser2API. Cheerio peut analyser presque n'importe quel document HTML ou XML.

Et JSDOM ?

J'écris Cheerio parce que je suis de plus en plus frustré par JSOM. Pour moi, il y a trois problèmes majeurs que je rencontre encore et encore :

• L'analyseur intégré de JSDOM est trop strict : l'analyseur HTML fourni avec JSDOM ne peut actuellement pas gérer de nombreux sites Web populaires.

•JSDOM est trop lent : lors de l'analyse de grands sites Web, JSDOM présente des retards évidents.

•JSDOM semble trop lourd : le but de JSDOM est de fournir un environnement DOM qui est le même que ce que nous voyons dans le navigateur (remarque * JavaScript exécutable). Je n'ai jamais vraiment eu besoin de tout cela, je veux juste une manière simple et familière de manipuler du HTML.

Quand utiliser JSDOM

Cheerio ne peut pas résoudre tous vos problèmes. Si je dois travailler dans un environnement de type navigateur, j'utiliserai toujours JSDOM, surtout si je souhaite effectuer des tests fonctionnels automatisés sur le serveur.

API

Exemple de code HTML que nous utiliserons :

Copier le code Le code est le suivant :

• Pomme


• Orange


• Poire

Chargement

Tout d’abord, vous devez charger le HTML. Cette étape est effectuée automatiquement dans jQuery car jQuery s'exécute dans un environnement DOM en temps réel. Nous devons transmettre le document HTML à Cheerio.

C'est la méthode préférée :

Copier le code Le code est le suivant :

var cheerio = require('cheerio'),
$ = cheerio.load('

...

');

Alternativement, vous pouvez transmettre du HTML en tant que paramètre de chaîne :

Copier le code Le code est le suivant :

$ = require('cheerio');
$('ul', '

...

');

ou en tant que nœud racine

Copier le code Le code est le suivant :

$ = require('cheerio');
$('li', 'ul', '

...

');

Vous pouvez également charger les options d'analyse par défaut que vous devez modifier via un .load() supplémentaire :

Copier le code Le code est le suivant :

$ = cheerio.load('

...

', {
NormalizeWhitespace : vrai,
xmlMode : vrai
});

Ces options d'analyse sont empruntées directement à htmlparser2, donc tous les paramètres pouvant être utilisés dans htmlparser2 sont également valides dans cheerio. L'option par défaut est :

Copier le code Le code est le suivant :

{
NormalizeWhitespace : faux,
xmlMode : faux,
decodeEntities : vrai
>

Sélecteurs

Les sélecteurs de Cheerio sont presque identiques à ceux de jQuery, donc l'API est très similaire.

Copier le code Le code est le suivant :

$( sélecteur, [contexte], [racine] )

Le sélecteur sélectionne les éléments dans l'ordre : racine[racine, facultatif]->Contexte[contexte, facultatif]->sélecteur. Les sélecteurs et les contextes peuvent être une expression de chaîne, un élément DOM ou un tableau d'éléments DOM. La racine du document est généralement l'élément racine du document HTML.

Comme jQuery, cette méthode de sélection parcourt et manipule le document depuis le point de départ. Il s'agit du principal moyen de sélectionner des éléments d'un document, mais il n'est pas construit comme la bibliothèque CSSSelect de jQuery (sélecteur Sizzle).

Copier le code Le code est le suivant :

$('.apple', '#fruits').text()
//=> Pomme
$('ul .pear').attr('class')
//=>poire
$('li[class=orange]').html()
//=>

Orange

Attributs

Méthodes pour obtenir et modifier les propriétés.

.attr( nom, valeur )

Méthodes d'obtention et de définition des propriétés. Obtient uniquement la valeur d'attribut du premier élément correspondant. Si la valeur d'une propriété définie est définie sur null, la propriété est supprimée. Vous pouvez également transmettre une carte et une fonction comme jQuery.

Copier le code Le code est le suivant :

$('ul').attr('id')
//=>fruits
$('.apple').attr('id', 'favorite').html()
//=>

Pomme

.data( nom, valeur )

Méthodes d'obtention et de définition des propriétés des données. Obtient ou définit uniquement le premier élément de la correspondance.

Copier le code Le code est le suivant :

$('

').data()
//=> { couleur pomme : 'rouge' }
$('

').data('data-apple-color')
//=> 'rouge'
var pomme = $('.apple').data('kind', 'mac')
apple.data('genre')
//=> 'mac'
.val( [valeur] )

Méthodes pour obtenir et définir les valeurs de saisie, de sélection et de zone de texte. Remarque : la carte est prise en charge, la fonction n'a pas encore été ajoutée.

Copier le code Le code est le suivant :

$('input[type="text"]').val()
//=>input_text
$('input[type="text"]').val('test').html()
//=>

Pour plus d'API, veuillez visiter le site officiel