NodeJS使用jQuery选择器操作DOM


Posted in NodeJs onFebruary 13, 2015

注* 这是一个两年多的“老”项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题:   Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的

cheerio

快速,灵活,在服务器端使用的jQuery。

简介

测试你的服务器端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核心的一个子集。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代码:

<ul id="fruits">

<li class="apple">Apple</li>

<li class="orange">Orange</li>

<li class="pear">Pear</li>

</ul>

加载

首先,你需要在加载HTML。这一步在jQuery是自动完成的,因为jQuery的运行在一个,即时的DOM环境中。我们需要将HTML文档传入Cheerio中。

这是首选的方法:

var cheerio = require('cheerio'),

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

另外,您还可以将HTML作为字符串参数传入:

$ = require('cheerio');

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

或者作为根结点

$ = require('cheerio');

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

您也可以通过一个额外的.load()加载您需要修改的默认解析选项:

$ = cheerio.load('<ul id="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()

//=> <li class="orange">Orange</li>

Attributes属性

获取和修改属性的方法。

.attr( name, value )

用于获取和设置属性的方法。仅获取匹配的第一个元素的属性值。如果设置属性的值设置为null,则删除该属性。您也可以像jQuery一样传入map和function。

$('ul').attr('id')

//=> fruits

$('.apple').attr('id', 'favorite').html()

//=> <li class="apple" id="favorite">Apple</li>

.data( name, value )

用于获取和设置数据属性的方法。获取或设置仅用于匹配的第一个元素。

$('<div data-apple-color="red"></div>').data()

//=> { appleColor: 'red' }

$('<div data-apple-color="red"></div>').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()

//=> <input type="text" value="test"/>

更多API请参见官网

NodeJs 相关文章推荐
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
Dec 18 NodeJs
Windows系统中安装nodejs图文教程
Feb 28 NodeJs
nodejs实现bigpipe异步加载页面方案
Jan 26 NodeJs
nodejs如何获取时间戳与时间差
Aug 03 NodeJs
nodejs 子进程正确的打开方式
Jul 03 NodeJs
Nodejs中crypto模块的安全知识讲解
Jan 03 NodeJs
Mac下通过brew安装指定版本的nodejs教程
May 17 NodeJs
nodejs 使用nodejs-websocket模块实现点对点实时通讯
Nov 28 NodeJs
nodejs图片处理工具gm用法小结
Dec 12 NodeJs
Nodejs让异步变成同步的方法
Mar 02 NodeJs
Nodejs实现用户注册功能
Apr 14 NodeJs
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
May 30 NodeJs
NodeJs基本语法和类型
Feb 13 #NodeJs
nodejs事件的监听与触发的理解分析
Feb 12 #NodeJs
nodejs 整合kindEditor实现图片上传
Feb 03 #NodeJs
NodeJS学习笔记之Connect中间件应用实例
Jan 27 #NodeJs
NodeJS学习笔记之Connect中间件模块(二)
Jan 27 #NodeJs
NodeJS学习笔记之Connect中间件模块(一)
Jan 27 #NodeJs
nodejs批量修改文件编码格式
Jan 22 #NodeJs
You might like
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
javascript实现的listview效果
2007/04/28 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
Python面向对象类的继承实例详解
2018/06/27 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Pycharm调试程序技巧小结
2020/08/08 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
JNI的定义
2012/11/25 面试题
师范毕业生自我鉴定
2014/01/15 职场文书
趣味游戏活动方案
2014/02/07 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
导师对论文的学术评语
2015/01/04 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书