NodeJS使用jQuery選擇器操作DOM
注* 這是一個(gè)兩年多的“老”項(xiàng)目，可以讓你在NodeJS中使用jQuery的選擇器,像操作前端DOM一樣操作后端的HTML/XML,在去除瀏覽器兼容相關(guān)代碼后,比JSDOM的操作快8倍. 之前我們?cè)?jīng)提到JSDOM有嚴(yán)重的性能問題: Debug調(diào)試Node.JS:我們是如何定位內(nèi)存泄漏和無限循環(huán)的
cheerio
快速，靈活，在服務(wù)器端使用的jQuery。
簡(jiǎn)介
測(cè)試你的服務(wù)器端HTML:
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實(shí)現(xiàn)了jQuery核心的一個(gè)子集。Cheerio 從jQuery庫中刪除了所有的DOM不一致和瀏覽器兼容支持，呈現(xiàn)其真正華麗的API。
ϟ極快：Cheerio 使用一個(gè)非常簡(jiǎn)單的，一致的DOM模型。這樣解析，操作和呈現(xiàn)就會(huì)帶來令人難以置信的性能提升。初步的端至端的基準(zhǔn)測(cè)試表明Cheerio比JSDOM快大概8倍。
❁令人難以置信的靈活性：兼容htmlparser2API。Cheerio可以解析幾乎所有的HTML或XML文檔。
JSDOM怎么樣?
我寫Cheerio，因?yàn)槲覍?duì)JSOM越來越感到失望。對(duì)于我來說，有我一次又一次的碰到三大癥結(jié)：
•JSDOM內(nèi)置的解析器是太過嚴(yán)格：JSDOM捆綁的HTML解析器現(xiàn)在不能處理很多流行的網(wǎng)站。
•JSDOM太慢：解析大網(wǎng)站,JSDOM有明顯的延遲。
•JSDOM感覺太沉重：JSDOM的目的是提供一個(gè)跟我們?cè)跒g覽器中看到的相同的DOM環(huán)境(注* 可執(zhí)行JavaScript)。我從來沒有真的需要這些東西，我只想要一個(gè)簡(jiǎn)單的，熟悉的方式做HTML操作。
什么時(shí)侯使用JSDOM
Cheerio無法解決你所有的問題。如果我需要在一個(gè)類似瀏覽器的環(huán)境中工作,我仍然會(huì)使用JSDOM，特別是當(dāng)在服務(wù)器上想要進(jìn)行自動(dòng)化功能測(cè)試時(shí)。
API
我們將使用的示例HTML代碼：
<ul id="fruits">
<li class="apple">Apple</li>
<li class="orange">Orange</li>
<li class="pear">Pear</li>
</ul>
加載
首先，你需要在加載HTML。這一步在jQuery是自動(dòng)完成的，因?yàn)閖Query的運(yùn)行在一個(gè)，即時(shí)的DOM環(huán)境中。我們需要將HTML文檔傳入Cheerio中。
這是首選的方法：
var cheerio = require('cheerio'),
$ = cheerio.load('<ul id="fruits">...</ul>');
另外，您還可以將HTML作為字符串參數(shù)傳入:
$ = require('cheerio');
$('ul', '<ul id="fruits">...</ul>');
或者作為根結(jié)點(diǎn)
$ = require('cheerio');
$('li', 'ul', '<ul id="fruits">...</ul>');
您也可以通過一個(gè)額外的.load（）加載您需要修改的默認(rèn)解析選項(xiàng)：
$ = cheerio.load('<ul id="fruits">...</ul>', {
normalizeWhitespace: true,
xmlMode: true
});
這些解析選項(xiàng)是直接從 htmlparser2 借來的，因此可以在htmlparser2使用的任何參數(shù)在cheerio也有效。默認(rèn)的選項(xiàng)是：
{
normalizeWhitespace: false,
xmlMode: false,
decodeEntities: true
}
Selectors選擇器
Cheerio的選擇器幾乎與jQuery的完全相同，所以API是非常相似的。
$( selector, [context], [root] )
選擇器按照: 根[root,可選]->上下文[context,可選]->選擇器 的順序選擇元素。選擇器和上下文可以是一個(gè)字符串表達(dá)式，DOM元素，DOM元素?cái)?shù)組。根通常document 是 HTML文檔的根元素。
像jQuery一樣,此選擇方法會(huì)從起點(diǎn)遍歷和操縱文檔。它是從文檔中選擇的元素的主要方法，但不像jQuery那樣構(gòu)建CSSSelect庫(Sizzle 選擇器)。
$('.apple', '#fruits').text()
//=> Apple
$('ul .pear').attr('class')
//=> pear
$('li[class=orange]').html()
//=> <li class="orange">Orange</li>
Attributes屬性
獲取和修改屬性的方法。
.attr( name, value )
用于獲取和設(shè)置屬性的方法。僅獲取匹配的第一個(gè)元素的屬性值。如果設(shè)置屬性的值設(shè)置為null，則刪除該屬性。您也可以像jQuery一樣傳入map和function。
$('ul').attr('id')
//=> fruits
$('.apple').attr('id', 'favorite').html()
//=> <li class="apple" id="favorite">Apple</li>
.data( name, value )
用于獲取和設(shè)置數(shù)據(jù)屬性的方法。獲取或設(shè)置僅用于匹配的第一個(gè)元素。
$('<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尚未添加。
$('input[type="text"]').val()
//=> input_text
$('input[type="text"]').val('test').html()
//=> <input type="text" value="test"/>
更多API請(qǐng)參見官網(wǎng)
相關(guān)文章
終于實(shí)現(xiàn)了!精彩的jquery彈幕效果
終于實(shí)現(xiàn)精彩的jquery彈幕效果了，這篇文章就為大家詳細(xì)介紹了jquery彈幕效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
jQuery替換字符串的實(shí)例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
jQuery插件bxSlider實(shí)現(xiàn)響應(yīng)式焦點(diǎn)圖
bxSlider特性1.充分響應(yīng)各種設(shè)備，適應(yīng)各種屏幕；2.支持多種滑動(dòng)模式，水平、垂直以及淡入淡出效果；3.支持圖片、視頻以及任意html內(nèi)容；4.支持觸摸滑動(dòng)；5.支持Firefox，Chrome，Safari，iOS，Android，IE7+，下面我們就來詳細(xì)探討下吧。2015-04-04
Domino中運(yùn)用jQuery讀取視圖內(nèi)容的方法
jQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。2009-10-10
很簡(jiǎn)單的一個(gè)效果插件,但不是經(jīng)常用,怕忘了,以后在用又要去看文檔,所以現(xiàn)在把筆記寫下來,方便以后2010-08-08
.filter()方法可以接受一個(gè)函數(shù)作為參數(shù)，然后根據(jù)函數(shù)的返回值判斷，這就是jquery選擇器的過濾器，下面有個(gè)不錯(cuò)的示例，大家可以參考下2013-09-09
這篇文章主要介紹了jQuery加載及解析XML文件的方法,結(jié)合實(shí)例形式分析了xml文件的創(chuàng)建及jQuery針對(duì)xml文件的獲取、解析相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
jquery實(shí)現(xiàn)表格行拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格行拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
jQuery實(shí)現(xiàn)刪除li節(jié)點(diǎn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)刪除li節(jié)點(diǎn)的方法的相關(guān)資料,需要的朋友可以參考下2016-12-12
javascript開發(fā)中使用onpropertychange,oninput事件解決onchange事件的不足
用onpropertychange,oninput事件解決onchange事件的不足，需要的朋友可以參考下。2010-11-11