注* 這是一個兩年多的“老”項目，可以讓你在NodeJS中使用jQuery的選擇器,像操作前端DOM一樣操作后端的HTML/XML,在去除瀏覽器兼容相關(guān)代碼后,比JSDOM的操作快8倍. 之前我們曾經(jīng)提到JSDOM有嚴重的性能問題: Debug調(diào)試Node.JS:我們是如何定位內(nèi)存泄漏和無限循環(huán)的

cheerio

快速，靈活，在服務(wù)器端使用的jQuery。

簡介

測試你的服務(wù)器端HTML:

復(fù)制代碼代碼如下:

var cheerio = require('cheerio'),

$ = cheerio.load('<h2 class="title">Hello world</h2>');

$('h2.title').text('Hello there!');

$('h2').addClass('welcome');

$.html();

//=> <h2 class="title welcome">Hello there!</h2>

安裝

npm install cheerio

功能

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

ϟ極快：Cheerio 使用一個非常簡單的，一致的DOM模型。這樣解析，操作和呈現(xiàn)就會帶來令人難以置信的性能提升。初步的端至端的基準(zhǔn)測試表明Cheerio比JSDOM快大概8倍。

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

JSDOM怎么樣?

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

•JSDOM內(nèi)置的解析器是太過嚴格：JSDOM捆綁的HTML解析器現(xiàn)在不能處理很多流行的網(wǎng)站。

•JSDOM太慢：解析大網(wǎng)站,JSDOM有明顯的延遲。

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

什么時侯使用JSDOM

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

API

我們將使用的示例HTML代碼：

復(fù)制代碼代碼如下:

<ul id="fruits">

<li class="apple">Apple</li>

<li class="orange">Orange</li>

<li class="pear">Pear</li>

</ul>

加載

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

這是首選的方法：

復(fù)制代碼代碼如下:

var cheerio = require('cheerio'),

    $ = cheerio.load('<ul id="fruits">...</ul>');

另外，您還可以將HTML作為字符串參數(shù)傳入:

復(fù)制代碼代碼如下:

$ = require('cheerio');

$('ul', '<ul id="fruits">...</ul>');

或者作為根結(jié)點

復(fù)制代碼代碼如下:

$ = require('cheerio');

$('li', 'ul', '<ul id="fruits">...</ul>');

您也可以通過一個額外的.load（）加載您需要修改的默認解析選項：

復(fù)制代碼代碼如下:

$ = cheerio.load('<ul id="fruits">...</ul>', {

    normalizeWhitespace: true,

    xmlMode: true

});

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

復(fù)制代碼代碼如下:

{

    normalizeWhitespace: false,

    xmlMode: false,

    decodeEntities: true

}

Selectors選擇器

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

復(fù)制代碼代碼如下:

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

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

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

復(fù)制代碼代碼如下:

$('.apple', '#fruits').text()

//=> Apple

$('ul .pear').attr('class')

//=> pear

$('li[class=orange]').html()

//=> <li class="orange">Orange</li>

Attributes屬性

獲取和修改屬性的方法。

.attr( name, value )

用于獲取和設(shè)置屬性的方法。僅獲取匹配的第一個元素的屬性值。如果設(shè)置屬性的值設(shè)置為null，則刪除該屬性。您也可以像jQuery一樣傳入map和function。

復(fù)制代碼代碼如下:

$('ul').attr('id')

//=> fruits

$('.apple').attr('id', 'favorite').html()

//=> <li class="apple" id="favorite">Apple</li>

.data( name, value )

用于獲取和設(shè)置數(shù)據(jù)屬性的方法。獲取或設(shè)置僅用于匹配的第一個元素。

復(fù)制代碼代碼如下:

$('<div data-apple-color="red"></div>').data()

//=> { appleColor: 'red' }

$('<div data-apple-color="red"></div>').data('data-apple-color')

//=> 'red'

var apple = $('.apple').data('kind', 'mac')

apple.data('kind')

//=> 'mac'

.val( [value] )

用于獲取和設(shè)置input，select和textarea值的方法。注：支持map，function尚未添加。

復(fù)制代碼代碼如下:

$('input[type="text"]').val()

//=> input_text

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

//=> <input type="text" value="test"/>

更多API請參見官網(wǎng)

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

NodeJS使用jQuery選擇器操作DOM

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具