NodeJS は jQuery セレクターを使用して DOM_jquery を操作します

注* これは 2 年以上前の「古い」プロジェクトであり、ブラウザ互換性関連のコードを削除した後、NodeJS で jQuery のセレクターを使用してバックエンド HTML/XML をフロントエンド DOM と同様に操作できるようになります。 , 操作は JSDOM より 8 倍高速です。JSDOM には重大なパフォーマンスの問題があることを以前に述べました: Node.JS のデバッグ: メモリ リークと無限ループを特定するにはどうすればよいですか

。

チェリオ

サーバー側で jQuery を使用する、高速かつ柔軟。

はじめに

サーバーサイド HTML をテストします:

コードをコピーします コードは次のとおりです:

var チェリオ = require('チェリオ'),
$ = Cheerio.load('

Hello world

');
$('h2.title').text('こんにちは!');
$('h2').addClass('welcome');
$.html();
//=>

こんにちは!

インストール

npm install Cherio

関数

❤ 使い慣れた構文: Cheerio はコア jQuery のサブセットを実装します。 Cheerio は、jQuery ライブラリからすべての DOM の不整合とブラウザ互換性サポートを削除し、真にゴージャスな API を提供します。

ϟ 非常に高速: Cheerio は非常にシンプルで一貫性のある DOM モデルを使用します。これにより、解析、操作、レンダリングのパフォーマンスが大幅に向上します。予備的なエンドツーエンドのベンチマークでは、Cheerio が JSDOM よりも約 8 倍高速であることが示されています。

❁驚異的な柔軟性: htmlparser2API と互換性があります。 Cheerio は、ほぼすべての HTML または XML ドキュメントを解析できます。

JSDOM はどうですか?

私が Cheerio を書いているのは、JSOM にますます不満を感じているからです。私にとって、何度も遭遇する 3 つの大きな問題があります。

• JSDOM の組み込みパーサーは厳密すぎる: JSDOM にバンドルされている HTML パーサーは現在、多くの人気のある Web サイトを処理できません。

•JSDOM が遅すぎる: 大規模な Web サイトを解析する場合、JSDOM には明らかな遅延が発生します。

•JSDOM が重すぎると感じる: JSDOM の目的は、ブラウザーで表示されるものと同じ DOM 環境 (注 * 実行可能な JavaScript) を提供することです。私は実際にこのようなものを必要としたことはありません。HTML 操作を行うためのシンプルで使い慣れた方法が欲しいだけです。

JSDOM を使用する場合

チェリオはあなたのすべての問題を解決できるわけではありません。ブラウザのような環境で作業する必要がある場合、特にサーバー上で自動機能テストを行う場合は、引き続き JSDOM を使用します。

API

使用するサンプル HTML コード:

コードをコピーします コードは次のとおりです:

• Apple


• オレンジ


• ナシ

読み込み中

まず、HTML をロードする必要があります。 jQuery はリアルタイム DOM 環境で実行されるため、この手順は jQuery で自動的に実行されます。 HTML ドキュメントを Cheerio に渡す必要があります。

これが推奨される方法です:

コードをコピーします コードは次のとおりです:

var チェリオ = require('チェリオ'),
$ = Cheerio.load('

...

');

または、HTML を文字列パラメータとして渡すこともできます。

コードをコピーします コードは次のとおりです:

$ = require('チェリオ');
$('ul', '

...

');

またはルートノードとして

コードをコピーします コードは次のとおりです:

$ = require('チェリオ');
$('li', 'ul', '

...

');

追加の .load() を使用して、変更する必要があるデフォルトの解析オプションをロードすることもできます:

コードをコピー コードは次のとおりです:

$ = Cheerio.load('

...

', {
NormalizeWhitespace: true、
xmlモード: true
});

これらの解析オプションは htmlparser2 から直接借用したものであるため、htmlparser2 で使用できるパラメーターはすべて Cheerio でも有効です。デフォルトのオプションは次のとおりです:

コードをコピーします コードは次のとおりです:

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

セレクター

Cheerio のセレクターは jQuery のセレクターとほぼ同じであるため、API は非常に似ています。

コードをコピーします コードは次のとおりです:

$( セレクター, [コンテキスト], [ルート] )

セレクターは、root[root、オプション]->Context[コンテキスト、オプション]->selector の順序で要素を選択します。セレクターとコンテキストは、文字列式、DOM 要素、または DOM 要素の配列にすることができます。通常、ルート ドキュメントは HTML ドキュメントのルート要素です。

jQuery と同様に、この選択メソッドは開始点からドキュメントを走査して操作します。これはドキュメントから要素を選択する主な方法ですが、jQuery の CSSSelect ライブラリ (Sizzle セレクター) のように構築されていません。

コードをコピーします コードは次のとおりです:

$('.apple', '#fruits').text()
//=> アップル
$('ul .pear').attr('class')
//=> 梨
$('li[class=orange]').html()
//=>

オレンジ

属性

プロパティを取得および変更するメソッド。

.attr( 名前, 値 )

プロパティを取得および設定するためのメソッド。最初に一致した要素の属性値のみを取得します。設定されたプロパティの値が null に設定されている場合、そのプロパティは削除されます。 jQuery と同じようにマップと関数を渡すこともできます。

コードをコピーします コードは次のとおりです:

$('ul').attr('id')
//=> 果物
$('.apple').attr('id', 'お気に入り').html()
//=>

Apple

.data( 名前, 値 )

データのプロパティを取得および設定するためのメソッド。一致の最初の要素のみを取得または設定します。

コードをコピーします コードは次のとおりです:

$('

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

').data('data-apple-color')
//=> '赤'
var apple = $('.apple').data('kind', 'mac')
apple.data('種類')
//=> 'マック'
.val( [値] )

入力、選択、およびテキストエリアの値を取得および設定するメソッド。注: マップはサポートされていますが、機能はまだ追加されていません。

コードをコピーします コードは次のとおりです:

$('input[type="text"]').val()
//=> 入力テキスト
$('input[type="text"]').val('test').html()
//=>

その他の API については、公式 Web サイトをご覧ください