注* 这是一个两年多的“老”项目,可以让你在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请参见官网