NodeJS使用jQuery選擇器操作DOM
注* 這是一個(gè)兩年多的“老”項(xiàng)目，可以讓你在NodeJS中使用jQuery的選擇器,像操作前端DOM一樣操作后端的HTML/XML,在去除瀏覽器兼容相關(guān)代碼后,比JSDOM的操作快8倍. 之前我們?cè)?jīng)提到JSDOM有嚴(yán)重的性能問(wèn)題: Debug調(diào)試Node.JS:我們是如何定位內(nèi)存泄漏和無(wú)限循環(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
功能
❤熟悉的語(yǔ)法：Cheerio實(shí)現(xiàn)了jQuery核心的一個(gè)子集。Cheerio 從jQuery庫(kù)中刪除了所有的DOM不一致和瀏覽器兼容支持，呈現(xiàn)其真正華麗的API。
ϟ極快：Cheerio 使用一個(gè)非常簡(jiǎn)單的，一致的DOM模型。這樣解析，操作和呈現(xiàn)就會(huì)帶來(lái)令人難以置信的性能提升。初步的端至端的基準(zhǔn)測(cè)試表明Cheerio比JSDOM快大概8倍。
❁令人難以置信的靈活性：兼容htmlparser2API。Cheerio可以解析幾乎所有的HTML或XML文檔。
JSDOM怎么樣?
我寫(xiě)Cheerio，因?yàn)槲覍?duì)JSOM越來(lái)越感到失望。對(duì)于我來(lái)說(shuō)，有我一次又一次的碰到三大癥結(jié)：
•JSDOM內(nèi)置的解析器是太過(guò)嚴(yán)格：JSDOM捆綁的HTML解析器現(xiàn)在不能處理很多流行的網(wǎng)站。
•JSDOM太慢：解析大網(wǎng)站,JSDOM有明顯的延遲。
•JSDOM感覺(jué)太沉重：JSDOM的目的是提供一個(gè)跟我們?cè)跒g覽器中看到的相同的DOM環(huán)境(注* 可執(zhí)行JavaScript)。我從來(lái)沒(méi)有真的需要這些東西，我只想要一個(gè)簡(jiǎn)單的，熟悉的方式做HTML操作。
什么時(shí)侯使用JSDOM
Cheerio無(wú)法解決你所有的問(wèn)題。如果我需要在一個(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>');
您也可以通過(guò)一個(gè)額外的.load（）加載您需要修改的默認(rèn)解析選項(xiàng)：
$ = cheerio.load('<ul id="fruits">...</ul>', {
normalizeWhitespace: true,
xmlMode: true
});
這些解析選項(xiàng)是直接從 htmlparser2 借來(lái)的，因此可以在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庫(kù)(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)參見(jiàn)官網(wǎng)
相關(guān)文章
瀑布流就是像瀑布一樣的網(wǎng)站——豐富的網(wǎng)站內(nèi)容，特別是絢美的圖片會(huì)讓你流連忘返。你在瀏覽網(wǎng)站的時(shí)候只需要輕輕滑動(dòng)一下鼠標(biāo)滾輪，一切的美妙的圖片精彩便可呈現(xiàn)在你面前。瀑布流網(wǎng)站是新興的一種網(wǎng)站模式——她的典型代表是pinterest、美麗說(shuō)、蘑菇街這類型的網(wǎng)站。2016-01-01
基于jQuery實(shí)現(xiàn)火焰燈效果導(dǎo)航菜單
這篇文章主要介紹了jQuery實(shí)現(xiàn)火焰燈效果導(dǎo)航菜單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了jQuery操作cookie的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
jQuery實(shí)現(xiàn)可兼容IE6的遮罩功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)可兼容IE6的遮罩功能,詳細(xì)分析了jQuery遮罩層的布局、樣式及功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09
小編收集了13個(gè)有用的CSS3,HTML5和jQuery搜索表單腳本來(lái)幫助大家從頭開(kāi)始創(chuàng)建一個(gè)搜索框。希望能夠幫助到大家，讓我們一起來(lái)看看吧！2014-12-12
jQuery.validate.js API說(shuō)明2010-07-07
今天遇到一個(gè)問(wèn)題需要獲取tagName，使用jquery，查詢了一下，大家說(shuō)用$("dd").attr("tagName")能獲取到，但是得到的返回值是undefined，于是又查詢餓了許久，返回遍歷了一下jquery封裝的對(duì)象2011-11-11
jQuery實(shí)現(xiàn)百度登錄框的動(dòng)態(tài)切換效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)百度登錄框的動(dòng)態(tài)切換效果,需要的朋友可以參考下2017-04-04
jquery彈窗時(shí)禁止body滾動(dòng)條滾動(dòng)的例子
今天小編就為大家分享一篇jquery彈窗時(shí)禁止body滾動(dòng)條滾動(dòng)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
相信大家應(yīng)該都會(huì)看到在各大網(wǎng)站上都有一個(gè)輪播器的效果，于是自己不禁也想做一個(gè)，查了資料，看了輪播器的原理，慢慢的試著做了做，最終效果勉勉強(qiáng)強(qiáng)，但還是想總結(jié)出來(lái)，或許對(duì)有需要的朋友們帶來(lái)一定的幫助，下面來(lái)一起看看吧。2016-12-12