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文件操作模块FS(File System)常用函数简明总结
Jun 05 NodeJs
详谈nodejs异步编程
Dec 04 NodeJs
NodeJS学习笔记之(Url,QueryString,Path)模块
Jan 13 NodeJs
NodeJS学习笔记之Connect中间件模块(一)
Jan 27 NodeJs
nodeJS代码实现计算交社保是否合适
Mar 09 NodeJs
Nodejs的express使用教程
Nov 23 NodeJs
详解nodejs 文本操作模块-fs模块(二)
Dec 22 NodeJs
NodeJS遍历文件生产文件列表功能示例
Jan 22 NodeJs
用nodeJS搭建本地文件服务器的几种方法小结
Mar 16 NodeJs
NodeJS实现图片上传代码(Express)
Jun 30 NodeJs
nodejs socket服务端和客户端简单通信功能
Sep 14 NodeJs
NodeJs实现简单的爬虫功能案例分析
Dec 05 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实现简单洗牌算法
2013/06/18 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Python对excel文档的操作方法详解
2018/12/10 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
公司管理建议书范文
2014/03/12 职场文书
五四演讲稿范文
2014/09/03 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
琅琊山导游词
2015/02/05 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
Pandas 稀疏数据结构的实现
2021/07/25 Python
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python