cheerio是nodejs的抓取页面模块,为服务器特别定制的,快速、灵活、实施的jQuery核心实现。适合各种Web爬虫程序。
Introduction
将HTML
告诉你的服务器
1 | var cheerio = require('cheerio'), |
Installation
1 | npm install cheerio |
Features
** 相似的语法:**Cheerio
包括了 jQuery
核心的子集。Cheerio
从jQuery
库中去除了所有DOM
不一致性和浏览器尴尬的部分,揭示了它真正优雅的API
。
** 闪电般的块:**Cheerio
工作在一个非常简单,一致的DOM
模型之上。解析,操作,呈送都变得难以置信的高效。基础的端到端的基准测试显示Cheerio
大约比JSDOM
快八倍(8x)。
** 巨灵活:** Cheerio
封装了兼容的htmlparser
。Cheerio
几乎能够解析任何的 HTML
和 XML document
。
What about JSDOM
我写cheerio
是因为我发现我自己对JSDOM
越来越沮丧。对于我来说,总是会一次又一次的碰上几个难点。
JSDOM
内建的解析太过于严格:JSDOM
附带的HTML
解析不能处理很多当下的大众的网站。JSDOM
太慢:用JSDOM
解析大型网站存在可见的延迟。JSDOM
太累赘:JSDOM
的目标是提供一个我们在浏览器里面看到的相同的DOM
环境。我从没有真的需要所有这些东西,我只是想要一个简单的,相似的方法去处理HTML
。
When I would use JSDOM
Cheerio
不会解决你的所有问题。我会使用JSDOM
,如果我需要用一个在服务器上的浏览器环境,特别是如果我想要自动化一些功能测试。
API
我们将用到的标记示例
1 | <ul id="fruits"> |
这是我们将会在所有的API例子中用到的HTML
标记
Loading
首先你需要加载HTML
。这一步对jQuery
来说是必须的,since jQuery operates on the one, baked-in DOM。通过Cheerio
,我们需要把HTML document
传进去。
这是首选:
1 | var cheerio = require('cheerio'), |
或者通过传递字符串作为内容来加载HTML
:
1 | $ = require('cheerio'); |
Or as the root:
1 | $ = require('cheerio'); |
你也可以传递一个额外的对象给.load()
如果你需要更改任何的默认解析选项的话:
1 | $ = cheerio.load('<ul id="fruits">...</ul>', { |
这些解析选项都是直接来自htmlparser
,因此任何在htmlparser
里有效的选项在Chreeio
里也是行得通的。默认的选项如下:
1 | { |
For a full list of options and their effects, see this and htmlparser2’s options.
Selectors
Cheerio
的选择器用起来几乎和jQuery
一样,所以API
也很相似。
1 | $(selectior,[context],[root]) |
选择器在 Context
范围内搜索,Context
又在Root
范围内搜索。selector
和context
可是是一个字符串表达式,DOM元素
,和DOM元素
的数组,或者chreeio
对象。root
是通常是HTML
文档字符串。
1 | $('.apple', '#fruits').text() |
Attributes
获得和修改属性
.attr(name,value)
获得和修改属性。在匹配的元素中只能获得第一元素的属性。如果设置一个属性的值为null
,则移除这个属性。你也可以传递一对键值,或者一个函数。
1 | $('ul').attr('id') |
更多信息请看这里
value([value])
获得和修改input
,select
,textarea
的value
.注意: 对于传递键值和函数的支持还没有被加进去。
1 | $('input[type="text"]').val() |
通过name
删除属性
1 | $('.pear').removeAttr('class').html() |
.hasClass( className )
检查匹配的元素是否有给出的类名
1 | $('.pear').hasClass('pear') |
.addClass(className)
增加class(es)
给所有匹配的elements
.也可以传函数。
1 | $('.pear').addClass('fruit').html() |
更多信息看这里
.removeClass([className])
从选择的elements
里去除一个或多个有空格分开的class
。如果className
没有定义,所有的classes
将会被去除,也可以传函数。
1 | $('.pear').removeClass('pear').html() |
更多信息看这里
.is.(selector)
.is(function(index))
有任何元素匹配selector
就返回true
。如果使用判定函数,判定函数在选中的元素中执行,所以this
指向当前的元素。
Traversing
.find(selector)
获得一个在匹配的元素中由选择器滤过的后代。
1 | $('#fruits').find('li').length |
.parent([selector])
获得每个匹配元素的parent
,可选择性的通过selectr
筛选。
1 | $('.pear').parent().attr('id') |
.parents([selector])
获得通过选择器筛选匹配的元素的parent
集合。
1 | $('.orange').parents().length |
.closest([selector])
对于每个集合内的元素,通过测试这个元素和DOM
层级关系上的祖先元素,获得第一个匹配的元素
1 | $('.orange').closest() |
.next()
获得第一个本元素之后的同级元素
1 | $('.apple').next().hasClass('orange') |
.nextAll()
获得本元素之后的所有同级元素
1 | $('.apple').nextAll() |
.prev()
获得本元素之前的第一个同级元素
1 | $('.orange').prev().hasClass('apple') |
.preAll()
1 | $('.pear').prevAll() |
获得本元素前的所有同级元素
.slice(start,[end])
获得选定范围内的元素
1 | $('li').slice(1).eq(0).text() |
.siblings(selector)
获得被选择的同级元素,除去自己
1 | $('.pear').siblings().length |
.children(selector)
获被选择元素的子元素
1 | $('#fruits').children().length |
.each(function(index,element))
迭代一个cheerio
对象,为每个匹配元素执行一个函数。When the callback is fired, the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element.要提早跳出循环,返回false
.
1 | var fruits = []; |
.map(function(index,element))
迭代一个cheerio
对象,为每个匹配元素执行一个函数。Map会返回一个迭代结果的数组。the function is fired in the context of the DOM element, so this refers to the current element, which is equivalent to the function parameter element
1 | $('li').map(function(i, el) { |
.filter(selector)
.filter(function(index))
迭代一个cheerio
对象,滤出匹配选择器或者是传进去的函数的元素。如果使用函数方法,这个函数在被选择的元素中执行,所以this
指向的手势当前元素。
Selector:
1 | $('li').filter('.orange').attr('class'); |
Function:
1 | $('li').filter(function(i, el) { |
.first()
会选择chreeio
对象的第一个元素
1 | $('#fruits').children().first().text() |
.last()
1 | $('#fruits').children().last().text() |
会选择chreeio
对象的最后一个元素
.eq(i)
通过索引筛选匹配的元素。使用.eq(-i)就从最后一个元素向前数。
1 | $('li').eq(0).text() |
Manipulation
改变DOM结构的方法
.append(content,[content…])
在每个元素最后插入一个子元素
1 | $('ul').append('<li class="plum">Plum</li>') |
.prepend(content,[content,…])
在每个元素最前插入一个子元素
1 | $('ul').prepend('<li class="plum">Plum</li>') |
.after(content,[content,…])
在每个匹配元素之后插入一个元素
1 | $('.apple').after('<li class="plum">Plum</li>') |
.before(content,[content,…])
在每个匹配的元素之前插入一个元素
1 | $('.apple').before('<li class="plum">Plum</li>') |
.remove( [selector] )
从DOM
中去除匹配的元素和它们的子元素。选择器用来筛选要删除的元素。
1 | $('.pear').remove() |
.replaceWith( content )
替换匹配的的元素
1 | var plum = $('<li class="plum">Plum</li>') |
.empty()
清空一个元素,移除所有的子元素
1 | $('ul').empty() |
.html( [htmlString] )
获得元素的HTML
字符串。如果htmlString
有内容的话,将会替代原来的HTML
1 | $('.orange').html() |
.text( [textString] )
获得元素的text
内容,包括子元素。如果textString
被指定的话,每个元素的text
内容都会被替换。
1 | $('.orange').text() |
Rendering
如果你想呈送document
,你能使用html
多效用函数。
1 | $.html() |
如果你想呈送outerHTML
,你可以使用 $.html(selector)
1 | $.html('.pear') |
默认的,html
会让一些标签保持开标签的状态.有时候你想呈现一个有效的XML
文档.例如下面这个:
1 | $ = cheerio.load('<media:thumbnail url="http://www.foo.com/keyframe.jpg" width="75" height="50" time="12:05:01.123"/>'); |
然后为了呈现这个XML
,你需要使用xml
这个函数:
1 | $.xml() |
Miscellaneous
不属于其它地方的DOM
元素方法
.toArray()
取得所有的在DOM
元素,转化为数组、
1 | $('li').toArray() |
.clone()
克隆cheerio
对象
1 | var moreFruit = $('#fruits').clone() |
Utilities
1 | $.root |
有时候你想找到最上层的root
元素,那么$.root()
就能获得:
1 | $.root().append('<ul id="vegetables"></ul>').html(); |
查看cotained
元素是否是container
元素的子元素
1 | $.parseHTML( data [, context ] [, keepScripts ] ) |
将字符串解析为DOM
节点数组。context
参数对chreeio
没有意义,但是用来维护API
的兼容性。