NodeJS verwendet den jQuery-Selektor, um DOM_jquery zu betreiben

Hinweis* Dies ist ein „altes“ Projekt seit mehr als zwei Jahren, das es Ihnen ermöglicht, den Back-End-HTML/XML nach dem Entfernen des Browserkompatibilitäts-bezogenen Codes wie das Front-End-DOM zu verwenden , Operationen sind 8-mal schneller als JSDOM. Wir haben bereits erwähnt, dass JSDOM schwerwiegende Leistungsprobleme aufweist: Debug Node.JS: Wie finden wir Speicherlecks und Endlosschleifen?

Cheerio

Schnell, flexibel, serverseitig mit jQuery.

Einführung

Testen Sie Ihr serverseitiges HTML:

Code kopieren Der Code lautet wie folgt:

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

Hallo Welt

');
$('h2.title').text('Hallo!');
$('h2').addClass('welcome');
$.html();
//=>

Hallo!

Installieren

npm install cheerio

Funktion

❤ Vertraute Syntax: Cheerio implementiert eine Teilmenge der Kern-jQuery. Cheerio entfernt jegliche DOM-Inkonsistenz und Browserkompatibilitätsunterstützung aus der jQuery-Bibliothek und präsentiert seine wirklich großartige API.

ϟ Extrem schnell: Cheerio verwendet ein sehr einfaches, konsistentes DOM-Modell. Dies führt zu unglaublichen Leistungssteigerungen beim Parsen, Bearbeiten und Rendern. Vorläufige End-to-End-Benchmarks zeigen, dass Cheerio etwa achtmal schneller ist als JSDOM.

❁Unglaubliche Flexibilität: Kompatibel mit htmlparser2API. Cheerio kann fast jedes HTML- oder XML-Dokument analysieren.

Wie wäre es mit JSDOM?

Ich schreibe Cheerio, weil ich mit JSOM zunehmend frustriert bin. Für mich sind es drei große Probleme, auf die ich immer wieder stoße:

• Der integrierte Parser von JSDOM ist zu streng: Der mit JSDOM gebündelte HTML-Parser kann derzeit viele beliebte Websites nicht verarbeiten.

•JSDOM ist zu langsam: Beim Parsen großer Websites kommt es bei JSDOM zu offensichtlichen Verzögerungen.

•JSDOM fühlt sich zu schwer an: Der Zweck von JSDOM besteht darin, eine DOM-Umgebung bereitzustellen, die mit dem übereinstimmt, was wir im Browser sehen (beachten Sie * ausführbares JavaScript). Ich habe so etwas nie wirklich gebraucht, ich möchte nur eine einfache, vertraute Methode zur HTML-Manipulation.

Wann sollte JSDOM verwendet werden?

Cheerio kann nicht alle deine Probleme lösen. Wenn ich in einer browserähnlichen Umgebung arbeiten muss, verwende ich weiterhin JSDOM, insbesondere wenn ich automatisierte Funktionstests auf dem Server durchführen möchte.

API

Beispiel-HTML-Code, den wir verwenden werden:

Code kopieren Der Code lautet wie folgt:

• Apple


• Orange


• Pear

Laden

Zuerst müssen Sie den HTML-Code laden. Dieser Schritt wird in jQuery automatisch ausgeführt, da jQuery in einer Echtzeit-DOM-Umgebung ausgeführt wird. Wir müssen das HTML-Dokument an Cheerio übergeben.

Dies ist die bevorzugte Methode:

Code kopieren Der Code lautet wie folgt:

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

...

');

Alternativ können Sie HTML als String-Parameter übergeben:

Code kopieren Der Code lautet wie folgt:

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

...

');

oder als Wurzelknoten

Code kopieren Der Code lautet wie folgt:

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

...

');

Sie können die Standard-Parsing-Optionen, die Sie ändern müssen, auch über ein zusätzliches .load() laden:

Code kopieren Der Code lautet wie folgt:

$ = cheerio.load('

...

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

Diese Parsing-Optionen sind direkt von htmlparser2 entlehnt, sodass alle Parameter, die in htmlparser2 verwendet werden können, auch in cheerio gültig sind. Die Standardoption ist:

Code kopieren Der Code lautet wie folgt:

{
NormalizeWhitespace: false,
xmlMode: false,
decodeEntities: true
}

Selektoren

Cheerios Selektoren sind fast identisch mit denen von jQuery, daher ist die API sehr ähnlich.

Code kopieren Der Code lautet wie folgt:

$( Selektor, [Kontext], [Stamm] )

Der Selektor wählt Elemente in der Reihenfolge aus: root[root, optional]->Context[context, optional]->selector. Selektoren und Kontexte können ein Zeichenfolgenausdruck, ein DOM-Element oder ein Array von DOM-Elementen sein. Das Root-Dokument ist normalerweise das Root-Element des HTML-Dokuments.

Wie jQuery durchläuft und manipuliert diese Auswahlmethode das Dokument vom Startpunkt aus. Dies ist die primäre Möglichkeit, Elemente aus einem Dokument auszuwählen, ist jedoch nicht wie die CSSSelect-Bibliothek (Sizzle-Selektor) von jQuery aufgebaut.

Code kopieren Der Code lautet wie folgt:

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

Orange

Attribute

Methoden zum Abrufen und Ändern von Eigenschaften.

.attr( name, value )

Methoden zum Abrufen und Festlegen von Eigenschaften. Ruft nur den Attributwert des ersten übereinstimmenden Elements ab. Wenn der Wert einer Set-Eigenschaft auf null gesetzt ist, wird die Eigenschaft entfernt. Sie können Map und Function auch wie jQuery übergeben.

Code kopieren Der Code lautet wie folgt:

$('ul').attr('id')
//=> Früchte
$('.apple').attr('id', 'favorite').html()
//=>

Apple

.data( Name, Wert)

Methoden zum Abrufen und Festlegen von Dateneigenschaften. Ruft nur das erste Element der Übereinstimmung ab oder legt es fest.

Code kopieren Der Code lautet wie folgt:

$('

').data()
//=> { appleColor: 'red' }
$('

').data('data-apple-color')
//=> 'rot'
var apple = $('.apple').data('kind', 'mac')
apple.data('kind')
//=> 'mac'
.val( [Wert] )

Methoden zum Abrufen und Festlegen von Eingabe-, Auswahl- und Textbereichswerten. Hinweis: Karte wird unterstützt, Funktion wurde noch nicht hinzugefügt.

Code kopieren Der Code lautet wie folgt:

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

Weitere APIs finden Sie auf der offiziellen Website