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

小灰灰 2022-08-07 04:39 145阅读 0赞

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

1.  var cheerio = require('cheerio'),  
    
2.      $ = cheerio.load('<h2 class="title">Hello world</h2>');  
    
3.    
    
4.  $('h2.title').text('Hello there!');  
    
5.  $('h2').addClass('\*\*');  
    
6.    
    
7.  $.html();  
    
8.  //=> <h2 class="title \*\*">Hello there!</h2>

复制代码

安装

1.  npm install cheerio

复制代码

功能  
  
  
❤熟悉的语法：Cheerio实现了jQuery核心的一个子集。Cheerio 从jQuery库中删除了所有的DOM不一致和浏览器兼容支持，呈现其真正华丽的API。  
  
  
ϟ极快：Cheerio 使用一个非常简单的，一致的DOM模型。这样解析，操作和呈现就会带来令人难以置信的性能提升。初步的端至端的基准测试表明Cheerio比JSDOM快大概8倍。  
  
  
❁令人难以置信的灵活性：兼容htmlparser2API。Cheerio可以解析几乎所有的HTML或XML文档。  
  
  
JSDOM怎么样?  
  
  
我写Cheerio，因为我对JSOM越来越感到失望。对于我来说，有我一次又一次的碰到三大症结：  
  
  
•JSDOM内置的解析器是太过严格：JSDOM捆绑的HTML解析器现在不能处理很多流行的[网站][Link 1]。  
  
  
•JSDOM太慢：解析大网站,JSDOM有明显的延迟。  
  
  
•JSDOM感觉太沉重：JSDOM的目的是提供一个跟我们在浏览器中看到的相同的DOM环境(注\* 可执行JavaScript)。我从来没有真的需要这些东西，我只想要一个简单的，熟悉的方式做HTML操作。  
  
  
什么时侯使用JSDOM  
  
  
Cheerio无法解决你所有的问题。如果我需要在一个类似浏览器的环境中工作,我仍然会使用JSDOM，特别是当在服务器上想要进行自动化功能测试时。  
  
  
API  
  
  
我们将使用的示例HTML代码：

1.  <ul id="fruits">  
    
2.    <li class="apple">Apple</li>  
    
3.    <li class="orange">Orange</li>  
    
4.    <li class="pear">Pear</li>  
    
5.  </ul>

复制代码

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

1.  var cheerio = require('cheerio'),  
    
2.      $ = cheerio.load('<ul id="fruits">...</ul>');

复制代码

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

1.  $ = require('cheerio');  
    
2.  $('ul', '<ul id="fruits">...</ul>');

复制代码

或者作为根结点

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

复制代码

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

1.  $ = cheerio.load('<ul id="fruits">...</ul>', \{  
    
2.      normalizeWhitespace: true,  
    
3.      xmlMode: true  
    
4.  \});

复制代码

这些解析选项是直接从[htmlparser2][] 借来的，因此可以在htmlparser2使用的任何参数在cheerio也有效。默认的选项是：

1.  \{  
    
2.      normalizeWhitespace: false,  
    
3.      xmlMode: false,  
    
4.      decodeEntities: true  
    
5.  \}

复制代码

Selectors选择器  
  
  
Cheerio的选择器几乎与jQuery的完全相同，所以API是非常相似的。

1.  $( selector, \[context\], \[root\] )

复制代码

选择器按照: 根\[root,可选\]->上下文\[context,可选\]->选择器 的顺序选择元素。选择器和上下文可以是一个字符串表达式，DOM元素，DOM元素数组。根通常document 是 HTML文档的根元素。  
  
  
像jQuery一样,此选择方法会从起点遍历和操纵文档。它是从文档中选择的元素的主要方法，但不像jQuery那样构建CSSSelect库(Sizzle 选择器)。

1.  $('.apple', '\#fruits').text()  
    
2.  //=> Apple  
    
3.    
    
4.  $('ul .pear').attr('class')  
    
5.  //=> pear  
    
6.    
    
7.  $('li\[class=orange\]').html()  
    
8.  //=> <li class="orange">Orange</li>

复制代码

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

1.  $('ul').attr('id')  
    
2.  //=> fruits  
    
3.    
    
4.  $('.apple').attr('id', 'favorite').html()  
    
5.  //=> <li class="apple" id="favorite">Apple</li>

复制代码

.data( name, value )  
  
  
用于获取和设置数据属性的方法。获取或设置仅用于匹配的第一个元素。

1.  $('<div data-apple-color="red"></div>').data()  
    
2.  //=> \{ appleColor: 'red' \}  
    
3.    
    
4.  $('<div data-apple-color="red"></div>').data('data-apple-color')  
    
5.  //=> 'red'  
    
6.    
    
7.  var apple = $('.apple').data('kind', 'mac')  
    
8.  apple.data('kind')  
    
9.  //=> 'mac'

复制代码

.val( \[value\] )  
  
  
用于获取和设置input，select和textarea值的方法。注：支持map，function尚未添加。

1.  $('input\[type="text"\]').val()  
    
2.  //=> input\_text  
    
3.    
    
4.  $('input\[type="text"\]').val('test').html()  
    
5.  //=> <input type="text" value="test"/>

复制代码

[Debug_Node.JS]: http://ourjs.com/detail/545d80ebbc3f9b154e000038
[Link 1]: http://www.html5cn.org/
[htmlparser2]: https://github.com/fb55/htmlparser2/wiki/Parser-options