转载

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

注* 这是一个两年多的“老”项目，可以让你在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代码：

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

<li class="orange">Orange</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请参见官网

原文地址：点此

正文到此结束

所属分类：编程技术

本文标签： js 调试 App XML ip UI CTO Select 自动化 jquery Apple DOM 安装代码 Document node map Node.js parse 测试网站 API 遍历性能问题服务器 tar CSS 解析参数 root 数据 HTML value java
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

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

cheerio

简介

安装

功能

JSDOM怎么样?

什么时侯使用JSDOM

API

加载

Selectors选择器

Attributes属性

.attr( name, value )

.data( name, value )

.val( [value] )

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流