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
NodeJS Web应用监听sock文件实例
Feb 18 NodeJs
Nodejs实现批量下载妹纸图
May 28 NodeJs
NodeJS实现阿里大鱼短信通知发送
Jan 17 NodeJs
nodejs中全局变量的实例解析
Mar 07 NodeJs
深入理解Nodejs Global 模块
Jun 03 NodeJs
详解Nodejs之静态资源处理
Jun 05 NodeJs
nodejs操作mongodb的增删改查功能实例
Nov 09 NodeJs
nodejs结合Socket.IO实现的即时通讯功能详解
Jan 12 NodeJs
Nodejs让异步变成同步的方法
Mar 02 NodeJs
浅谈使用nodejs搭建web服务器的过程
Jul 20 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
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
js 判断 enter 事件
2009/02/12 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
python读写二进制文件的方法
2015/05/09 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
python做接口测试的必要性
2019/11/20 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
python语言的优势是什么
2020/06/17 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
安全生产目标管理责任书
2014/07/25 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python
MySQL数据库表约束讲解
2022/06/21 MySQL