cheerio中文文档

这篇参考手册是对cheerio 官方文档 的中文翻译

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

简介

让你在服务器端和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实现了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模板如下:

<ul id="fruits">
  <li class="apple">Apple</li>
  <li class="orange">Orange</li>
  <li class="pear">Pear</li>
</ul>

1. 解析html(load)

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

首选的方式如下:

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

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

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

或者把HTML字符串作为root

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

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

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

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

2. 选择器(selectors)

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

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

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

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

$('.apple', '#fruits').text()
//=> Apple

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

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

3. 属性操作(atrributes)

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

.attr(name, value)

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

$('ul').attr('id')
//=> fruits

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

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

.removeAtrr(name)

移除名为name的属性

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

.hasClass(className)

检查元素是否含有此类名

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

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

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

.addClass(className)

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

$('.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为空,则所有的类名都会被移除,可以传递函数作为参数

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

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

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

遍历

.find(selector)

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

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

.parent()

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

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

.next()

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

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

.prev()

.next()相反

.siblings()

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

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

.children( selector )

.each( function(index, element) )

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

var fruits = [];

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

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

.map( function(index, element) )

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

.filter( selector )

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

.filter( function(index) )

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

.first()

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

.last()

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

.eq( i )

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

$('li').eq(0).text()
//=> Apple

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

操作DOM

操作DOM结构的方法

.append( content, [content, ...] )

.prepend( content, [content, ...] )

.after( content, [content, ...] )

$('.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, ...] )

$('.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] )

$('.pear').remove()
$.html()
//=>  <ul id = "fruits">
//      <li class = "apple">Apple</li>
//      <li class = "orange">Orange</li>
//    </ul>

.replaceWith( content )

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()

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

.html( [htmlString] )

$('.orange').html()
//=> Orange

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

.text( [textString] )

$('.orange').text()
//=> Orange

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

解析和渲染

$.html()
//=>  <ul id = "fruits">
//      <li class = "apple">Apple</li>
//      <li class = "orange">Orange</li>
//      <li class = "pear">Pear</li>
//    </ul>

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

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

杂项

.toArray()

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

.clone()

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

常用工具

$.root()

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

$.contains( container, contained )

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 148,827评论 1 317
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 63,511评论 1 266
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 99,318评论 0 218
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,108评论 0 189
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,112评论 1 266
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,387评论 1 185
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,905评论 2 283
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,657评论 0 177
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,144评论 0 223
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,744评论 2 225
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,100评论 1 236
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,565评论 2 222
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,041评论 3 216
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,769评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,301评论 0 178
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,173评论 2 239
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,313评论 2 242

推荐阅读更多精彩内容

  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,566评论 18 503
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,608评论 1 92
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,280评论 0 2
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 6,964评论 2 19
  • 转载自http://cnodejs.org/topic/5203a71844e76d216a727d2e ,略加美...
    vv源vv阅读 1,215评论 0 50