cheerio 是 jquery 核心功能的一个快速灵活而又简洁的实现,主要是为了用在服务器端需要对 DOM 进行操作的地方

简介

cheerio 是 nodejs 的抓取页面模块,为服务器特别定制的,快速、灵活、实施的 jQuery 核心实现。适合各种 Web 爬虫程序。

让你在服务器端和 html 愉快的玩耍

1
2
3
4
5
6
7
8
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>

安装

1
npm install cheerio

特点

  • 熟悉的语法*:cheerio 实现了 jQuery 的一个子集,去掉了 jQuery 中所有与 DOM 不一致或者是用来填浏览器的坑的东西,重现了 jQuery 最美妙的 API
  • 快到没朋友:cheerio 使用了及其简洁而又标准的 DOM 模型, 因此对文档的转换,操作,渲染都极其的高效。基本的端到端测试显示它的速度至少是 JSDOM 的 8 倍
  • 极其灵活:cheerio 使用了@FB55编写的非常兼容的htmlparser2,因此它可以解析几乎所有的 HTML 和 XML

关于 JSDOM

cheerio 产生的原因是出于对 JSDOM 的失望,主要体现在以下三点:

  • JSDOM 的解析规则太过于严格:JSDOM 的解析器无法处理现在许多的流行网站的内容
  • JSDOM 太慢了:解析大的网站甚至可以产生可察觉的延迟
  • JSDOM 太过于重量级:JSDOM 的目标是提供与浏览器一样的 DOM 环境,但是我们往往不需要这样。我们需要的只是一种简单,熟悉的方式来操作我们的 HTML

什么时候你应该用 JSDOM

cheerio 并非万能,当你需要一个浏览器一样的环境时,你最好还是用 JSDOM,尤其是你需要进行自动化的功能测试时

API

后面的例子中用到的 HTML 模板如下:

1
2
3
4
5
<ul id="fruits">
<li class="apple">Apple</li>
<li class="orange">Orange</li>
<li class="pear">Pear</li>
</ul>

解析 html(load)

首先你需要先加载你的 HTML。jQuery 会自动完成这一步,因为 jQuery 操作的 DOM 是固定的。但是在使用 cheerio 时我们要手动加载我们的 HTML 文档

首选的方式如下:

1
2
var cheerio = require('cheerio'),
$ = cheerio.load('<ul id = "fruits">...</ul>');

其次,直接把 HTML 字符串作为上下文也是可以的:

1
2
$ = require('cheerio');
$('ul', '<ul id = "fruits">...</ul>');

或者把 HTML 字符串作为 root

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

如果你需要自定义一些解析选项,你可以多传递一个对象给 load 方法:

1
2
3
4
$ = cheerio.load('<ul id = "fruits">...</ul>', {
ignoreWhitespace: true,
xmlMode: true
});

更多的解析选项可以参考domhandlerparser-options

选择器(selectors)

cheerio 的选择器几乎和 jQuery 一模一样,所以语法上十分相像

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

selectorcontext的范围内搜索,context的范围又包含在root的范围内。selectorcontext可以是一个字符串,DOM 元素,DOM 数组或者 cheerio 实例。root一般是一个 HTML 文档字符串

选择器是文档遍历和操作的起点。如同在 jQuery 中一样,它是选择元素节点最重要的方法,但是在 jQuery 中选择器建立在 CSS 选择器标准库上。cheerio 的选择器实现了大部分的方法

1
2
3
4
5
6
7
8
$('.apple', '#fruits').text()
//=> Apple

$('ul .pear').attr('class')
//=> pear

$('li[class=orange]').html()
//=> <li class = "orange">Orange</li>

属性操作(atrributes)

用来获取和更改属性的方法:

.attr(name, value)

这个方法用来获取和设置属性。获取第一个符合匹配的元素的属性值。如果某个属性值被设置成 null,那么该属性会被移除。你也可以把mapfunction作为参数传递进去,就像在 jQuery 中一样

1
2
3
4
5
$('ul').attr('id')
//=> fruits

$('.apple').attr('id', 'favorite').html()
//=> <li class = "apple" id = "favorite">Apple</li>

更多信息请查看 http://api.jquery.com/attr/

.removeAtrr(name)

移除名为 name 的属性

1
2
$('.pear').removeAttr('class').html()
//=> <li>Pear</li>

.hasClass(className)

检查元素是否含有此类名

1
2
3
4
5
6
7
8
$('.pear').hasClass('pear')
//=> true

$('apple').hasClass('fruit')
//=> false

$('li').hasClass('pear')
//=> true

.addClass(className)

添加类名到所有的匹配元素,可以用函数作为参数

1
2
3
4
5
$('.pear').addClass('fruit').html()
//=> <li class = "pear fruit">Pear</li>

$('.apple').addClass('fruit red').html()
//=> <li class = "apple fruit red">Apple</li>

参见 http://api.jquery.com/addClass/

.remoteClass([className])

移除一个或者多个(空格分隔)的类名,如果 className 为空,则所有的类名都会被移除,可以传递函数作为参数

1
2
3
4
5
$('.pear').removeClass('pear').html()
//=> <li class = "">Pear</li>

$('.apple').addClass('red').removeClass().html()
//=> <li class = "">Apple</li>

参见 http://api.jquery.com/removeClass/

遍历

.find(selector)

在当前元素集合中选择符合选择器规则的元素集合

1
2
$('#fruits').find('li').length
//=> 3

.parent()

获取元素集合第一个元素的父元素

1
2
$('.pear').parent().attr('id')
//=> fruits

.next()

选择当前元素的下一个兄弟元素

1
2
$('.apple').next().hasClass('orange')
//=> true

.prev()

同**.next()**相反

.siblings()

获取元素集合中第一个元素的所有兄弟元素,不包含它自己

1
2
$('.pear').siblings().length
//=> 2

.children( selector )

.each( function(index, element) )

遍历函数返回 false 即可终止遍历

1
2
3
4
5
6
7
8
var fruits = [];

$('li').each(function(i, elem) {
fruits[i] = $(this).text();
});

fruits.join(', ');
//=> Apple, Orange, Pear

.map( function(index, element) )

1
2
3
4
5
$('li').map(function(i, el) {
// this === el
return $(this).attr('class');
}).get().join(', ');
//=> apple, orange, pear

.filter( selector )

1
2
$('li').filter('.orange').attr('class');
//=> orange

.filter( function(index) )

1
2
3
4
5
$('li').filter(function(i, el) {
// this === el
return $(this).attr('class') === 'orange';
}).attr('class')
//=> orange

.first()

1
2
$('#fruits').children().first().text()
//=> Apple

.last()

1
2
$('#fruits').children().last().text()
//=> Pear

.eq( i )

缩小元素集合,可以用负数表示倒数第 i 个元素被保留

1
2
3
4
5
$('li').eq(0).text()
//=> Apple

$('li').eq(-1).text()
//=> Pear

操作 DOM

操作 DOM 结构的方法

.append( content, [content, …] )

.prepend( content, [content, …] )

.after( content, [content, …] )

1
2
3
4
5
6
7
8
$('.apple').after('<li class = "plum">Plum</li>')
$.html()
//=> <ul id = "fruits">
// <li class = "apple">Apple</li>
// <li class = "plum">Plum</li>
// <li class = "orange">Orange</li>
// <li class = "pear">Pear</li>
// </ul>

.before( content, [content, …] )

1
2
3
4
5
6
7
8
$('.apple').before('<li class = "plum">Plum</li>')
$.html()
//=> <ul id = "fruits">
// <li class = "plum">Plum</li>
// <li class = "apple">Apple</li>
// <li class = "orange">Orange</li>
// <li class = "pear">Pear</li>
// </ul>

.remove( [selector] )

1
2
3
4
5
6
$('.pear').remove()
$.html()
//=> <ul id = "fruits">
// <li class = "apple">Apple</li>
// <li class = "orange">Orange</li>
// </ul>

.replaceWith( content )

1
2
3
4
5
6
7
8
var plum = $('<li class = "plum">Plum</li>')
$('.pear').replaceWith(plum)
$.html()
//=> <ul id = "fruits">
// <li class = "apple">Apple</li>
// <li class = "orange">Orange</li>
// <li class = "plum">Plum</li>
// </ul>

.empty()

1
2
3
$('ul').empty()
$.html()
//=> <ul id = "fruits"></ul>

.html( [htmlString] )

1
2
3
4
5
$('.orange').html()
//=> Orange

$('#fruits').html('<li class = "mango">Mango</li>').html()
//=> <li class="mango">Mango</li>

.text( [textString] )

1
2
3
4
5
6
7
$('.orange').text()
//=> Orange

$('ul').text()
//=> Apple
// Orange
// Pear

解析和渲染

1
2
3
4
5
6
$.html()
//=> <ul id = "fruits">
// <li class = "apple">Apple</li>
// <li class = "orange">Orange</li>
// <li class = "pear">Pear</li>
// </ul>

输出包含自己在内的 HTML(outer HTML)

1
2
$.html('.pear')
//=> <li class = "pear">Pear</li>

杂项

.toArray()

1
2
$('li').toArray()
//=> [ {...}, {...}, {...} ]

.clone()

1
var moreFruit = $('#fruits').clone()

常用工具

$.root()

1
2
$.root().append('<ul id="vegetables"></ul>').html();
//=> <ul id="fruits">...</ul><ul id="vegetables"></ul>

$.contains( container, contained )