NodeJS使用jQuery选择器操作DOM

作者: 计算机网络技术  发布:2019-09-06

注* 那是三个八年多的“老”项目,能够令你在NodeJS中利用jQuery的选择器,像操作前端DOM同样操作后端的HTML/XML,在剔除浏览器包容相关代码后,比JSDOM的操作快8倍. 从前我们已经提到JSDOM有生死攸关的性指斥题:   Debug调节和测量检验Node.JS:我们是怎么样牢固内部存储器泄漏和Infiniti循环的

NodeJS使用jQuery采取器操作DOM,nodejsjquery

注* 那是二个三年多的“老”项目,能够令你在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中使用jQuery的选取器,像操作前端DOM同样操作后端...

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请参见官方网站

您大概感兴趣的篇章:

  • jQuery移动和复制dom节点实用DOM操作案例
  • jQuery的DOM操作之删除节点示例
  • jQuery学习笔记之jQuery的DOM操作
  • jQuery使用手册之二 DOM操作
  • js/jQuery对象互转(急忙操作dom成分)
  • jquery 操作DOM的骨干用法分享
  • jQuery DOM操作小结与实例
  • jQuery常会师试题之DOM操作详析

本文由今晚买四不像发布于计算机网络技术,转载请注明出处:NodeJS使用jQuery选择器操作DOM

关键词:

上一篇:CSS实现可拖动的弹出提示框
下一篇:没有了