NodeJS使用jQuery选择器操作DOM
注*这是一个两年多的“老”项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍.之前我们曾经提到JSDOM有严重的性能问题: Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的
cheerio
快速,灵活,在服务器端使用的jQuery。
简介
测试你的服务器端HTML:
varcheerio=require('cheerio'), $=cheerio.load('<h2class="title">Helloworld</h2>'); $('h2.title').text('Hellothere!'); $('h2').addClass('welcome'); $.html(); //=><h2class="titlewelcome">Hellothere!</h2>
安装
npminstallcheerio
功能
❤熟悉的语法: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代码:
<ulid="fruits"> <liclass="apple">Apple</li> <liclass="orange">Orange</li> <liclass="pear">Pear</li> </ul>
加载
首先,你需要在加载HTML。这一步在jQuery是自动完成的,因为jQuery的运行在一个,即时的DOM环境中。我们需要将HTML文档传入Cheerio中。
这是首选的方法:
varcheerio=require('cheerio'), $=cheerio.load('<ulid="fruits">...</ul>');
另外,您还可以将HTML作为字符串参数传入:
$=require('cheerio'); $('ul','<ulid="fruits">...</ul>');
或者作为根结点
$=require('cheerio'); $('li','ul','<ulid="fruits">...</ul>');
您也可以通过一个额外的.load()加载您需要修改的默认解析选项:
$=cheerio.load('<ulid="fruits">...</ul>',{ 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() //=><liclass="orange">Orange</li>
Attributes属性
获取和修改属性的方法。
.attr(name,value)
用于获取和设置属性的方法。仅获取匹配的第一个元素的属性值。如果设置属性的值设置为null,则删除该属性。您也可以像jQuery一样传入map和function。
$('ul').attr('id') //=>fruits $('.apple').attr('id','favorite').html() //=><liclass="apple"id="favorite">Apple</li>
.data(name,value)
用于获取和设置数据属性的方法。获取或设置仅用于匹配的第一个元素。
$('<divdata-apple-color="red"></div>').data() //=>{appleColor:'red'} $('<divdata-apple-color="red"></div>').data('data-apple-color') //=>'red' varapple=$('.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() //=><inputtype="text"value="test"/>
更多API请参见官网