OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

服务器端(NodeJS)使用jQuery选择器操作DOM(HTML/XML)


分享到


分类 JS开源   关键字 Node.JS   发布 ourjs  1422940522236
注意 转载须保留原文链接,译文链接,作者译者等信息。  
注* 这是一个两年多的“老”项目,可以让你在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请参见官网
原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 从一行CSS调试代码中学到的JavaScript知识
  2. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
  3. 理解Node.js的事件循环(Event Loop)和线程池
  4. 在nodejs中使用Redis缓存和查询数据及Session持久化(Express)
  5. 什么是Viewport Meta(width详解)及在手机上的应用
  6. 即将推出的CSS4 Level 4 Selectors(第4级选择器)
  7. JavaScript中的$$(*)代表什么和$选择器的由来
  8. io.js新支持的ECMAScript 6功能特性详解
  9. RedMonk的语言排名:JavaScript,Java保持领先;Go未进前20
  10. Node.JS开发者常犯的10个错误(一)
  11. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - JS开源
  1. Oracle发布官方版Node.JS数据库驱动
  2. 用JavaScript实现的Flash VM播放器(虚拟机)
  3. Chartist.js:一个开源的响应式前端矢量(SVG)图表库
  4. JavaScript中数学运算的安全范围及开源大整数高精度计算库
  5. Webaudio-mod-player:用HTML5音频接口播放mod音乐文件
  6. HexGL用HTML5和WebGL实现的3D赛车游戏
  7. CSS3动画效果速查参照表
  8. LokiJS:用JavaScript实现的面向文档的内存数据库
  9. 基于HTML5和JavaScript实现的Winamp MP3播放器
  10. Walkway用简单的方法为SVG元素添加动画效果

 关键字 - Node.JS
  1. 使用Node.JS批量查找替换目录下文本文件中图片地址内容
  2. 判断Node.JS TCP Socket当前连接状态
  3. Node.JS进程间通讯的几种方法:Redis Publish/Subscribe 和 UDP Socket
  4. 是什么让Node.js比Java更快?为什么NodeJS这么快?
  5. Node.JS命令行或批处理中更改Linux用户密码
  6. Node.JS用Path将相对路径转为绝对路径
  7. 使用Node.JS监听文件夹变化
  8. Node.JS循环删除非空文件夹及子目录下的所有文件
  9. Node.js网页抓取:一个最简单的http请求客户端示例(request client)
  10. 如何用Bootstrap免费网站模板和OnceAir云盘搭建个人网站服务器

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号