NodeJS使用jQuery選擇器操作DOM_jquery

註* 這是一個兩年多的「老」項目，可以讓你在NodeJS中使用jQuery的選擇器,像操作前端DOM一樣操作後端的HTML/XML,在去除瀏覽器兼容相關代碼後,比JSDOM的操作快8倍. 之前我們曾經提到JSDOM有嚴重的性能問題:   Debug調試Node.JS:我們是如何定位內存洩漏和無限循環的

cheerio

快速，靈活，在伺服器端使用的jQuery。

簡介

測試你的伺服器端HTML:

複製程式碼 程式碼如下:

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

Hello world

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

Hello there!

安裝

npm install cheerio

功能

❤熟悉的語法：Cheerio實現了jQuery核心的子集。 Cheerio 從jQuery庫中刪除了所有的DOM不一致和瀏覽器相容支持，呈現其真正華麗的API。

ϟ極快：Cheerio 使用一個很簡單的，一致的DOM模型。這樣解析，操作和呈現就會帶來令人難以置信的效能提升。初步的端至端的基準測試顯示Cheerio比JSDOM快大概8倍。

❁令人難以置信的靈活性：相容於htmlparser2API。 Cheerio可以解析幾乎所有的HTML或XML文件。

JSDOM怎麼樣?

我寫Cheerio，因為我對JSOM越來越感到失望。對我來說，有我一次又一次的碰到三大癥結：

•JSDOM內建的解析器是太嚴格：JSDOM捆綁的HTML解析器現在不能處理很多流行的網站。

•JSDOM太慢：解析大網站,JSDOM有明顯的延遲。

•JSDOM感覺太沉重：JSDOM的目的是提供一個跟我們在瀏覽器中看到的相同的DOM環境(註* 可執行JavaScript)。我從來沒有真的需要這些東西，我只想要一個簡單的，熟悉的方式做HTML操作。

什麼時侯使用JSDOM

Cheerio無法解決你所有的問題。如果我需要在一個類似瀏覽器的環境中工作,我仍然會使用JSDOM，特別是當在伺服器上想要進行自動化功能測試時。

API

我們將使用的範例HTML程式碼：

複製程式碼 程式碼如下:

• Apple


• Orange


• Pear

載入

首先，你需要在載入HTML。這一步在jQuery是自動完成的，因為jQuery的運行在一個，即時的DOM環境。我們需要將HTML文件傳入Cheerio。

這是首選的方法：

複製程式碼 程式碼如下:

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

...

');

另外，您也可以將HTML作為字串參數傳入:

複製程式碼 程式碼如下:

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

...

');

或作為根結點

複製程式碼 程式碼如下:

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

...

');

您也可以透過一個額外的.load（）載入您需要修改的預設解析選項：

複製程式碼 程式碼如下:

$ = cheerio.load('

...

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

這些解析選項是直接從 htmlparser2 借來的，因此可以在htmlparser2使用的任何參數在cheerio也有效。預設的選項是：

複製程式碼 程式碼如下:

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

Selectors選擇器

Cheerio的選擇器幾乎與jQuery的完全相同，所以API是非常相似的。

複製程式碼 程式碼如下:

$( selector, [context], [root] )

選擇器依照: 根[root,可選]->上下文[context,可選]->選擇器 的順序選擇元素。選擇器和上下文可以是一個字串表達式，DOM元素，DOM元素數組。根通常document 是 HTML文件的根元素。

像jQuery一樣,此選擇方法會從起點遍歷和操縱文件。它是從文件中選擇的元素的主要方法，但不像jQuery那樣建構CSSSelect庫(Sizzle 選擇器)。

複製程式碼 程式碼如下:

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

Orange

Attributes屬性

取得和修改屬性的方法。

.attr( name, value )

用來取得和設定屬性的方法。僅取得符合的第一個元素的屬性值。如果設定屬性的值設定為null，則刪除該屬性。您也可以像jQuery一樣傳入map和function。

複製程式碼 程式碼如下:

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

Apple

.data( name, value )

用於取得和設定資料屬性的方法。獲取或設定僅用於匹配的第一個元素。

複製程式碼 程式碼如下:

$('

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

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

用來取得和設定input，select和textarea值的方法。註：支援map，function尚未新增。

複製程式碼 程式碼如下:

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

更多API請參考官網