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

2023-05-16

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

cheerio

快速,灵活,在服务器端使用的jQuery。

简介

测试你的服务器端HTML:

var cheerio = require('cheerio'),

$ = cheerio.load('

Hello world

');

$('h2.title').text('Hello there!');

$('h2').addClass('welcome');

$.html();

//=>

Hello there!

安装

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代码:

  • Apple
  • Orange
  • Pear

加载

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

这是首选的方法:

var cheerio = require('cheerio'),

$ = cheerio.load('

  • ...
');

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

$ = require('cheerio');

$('ul', '

  • ...
');

或者作为根结点

$ = require('cheerio');

$('li', 'ul', '

  • ...
');

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

$ = cheerio.load('

  • ...
', {

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()

//=>

Orange

Attributes属性

获取和修改属性的方法。

.attr( name, value )

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

$('ul').attr('id')

//=> fruits

$('.apple').attr('id', 'favorite').html()

//=>

Apple

.data( name, value )

用于获取和设置数据属性的方法。获取或设置仅用于匹配的第一个元素。

$('

//=> { appleColor: 'red' }

$('

//=> '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()

//=>

更多API请参见官网

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html js 选择器,服务器端(NodeJS)使用jQuery选择器操作DOM(HTML/XML) 的相关文章

  • webpack用css/scss文件生成js文件

    描述 在我使用的 webpack 中迷你 CSS 提取插件 plugins new MiniCssExtractPlugin filename name hash css chunkFilename name hash css 加载 scs
  • 等待动态加载脚本

    在我的页面正文中 我需要插入以下代码作为 AJAX 调用的结果 p Loading jQuery p p Using jQuery p 我不能使用 load 由于文档已经加载 因此该事件不会触发 这安全吗 如果没有 我如何确保在执行自定义生
  • 下拉菜单导致滚动条

    我用过这个W3C 的示例 http www w3schools com bootstrap bootstrap dropdowns asp div class dropdown div
  • 如何重定向到另一个页面并从表中传递 url 中的参数?

    如何重定向到另一个页面并从表中传递 url 中的参数 我在龙卷风模板中创建了类似的东西 table thead tr th Username th th Nation th th Rank th th th tr thead tbody f
  • 如何在 joomla 模块中通过 javascript 发送输入文件类型

    我想将带有 javascript 的文件发送到 php 文件 我的 php 文件中有这个表单
  • 如何使用ckeditore通过ajax发送数据?

    我在 django 中有一个表格 这是 撰写邮件 形式 我将此表单从视图发送到我的模板 然后应用 ckeditor 来更改正文样式 我希望通过 ajax 发布此表单 当使用 ckeditor 时 body 字段的值不会随 request P
  • 什么是 jQuery valHook?

    阅读完有关valHooks in a jQuery 缺陷 http bugs jquery com ticket 9319最近在一个fiddle http jsfiddle net bV5fu 1 我搜索了 jQuery 文档和 Googl
  • 将压缩的json数据存储在本地存储中

    我想将 JSON 数据存储在本地存储中 有时存储的数据可能超过 5MB 每个域的浏览器允许的最大阈值 无论如何 我可以压缩或压缩数据并将其存储在本地存储中吗 如果对大数据进行每个 JS 函数的压缩和解压 会增加多少延迟 我正在使用这个 js
  • 输入元素可滚动并启用文本溢出省略号

    当我添加text overflow ellipsis对于输入元素 该元素是可滚动的 当我将光标放在元素上时 我可以左右滚动 就好像文本是全宽并且没有被截断一样 尽管后面没有文本 我该如何阻止这种行为 input width 180px te
  • 透明、无边框文本输入

    如何删除周围的边框
  • 解析 PHP 响应:未捕获的语法错误:意外的标记 <

    我正在使用 AJAX 来调用 PHP 脚本 我唯一需要从响应中解析的是脚本生成的随机 ID 问题是 PHP 脚本会引发许多错误 这些错误实际上很好 不会妨碍程序功能 唯一的问题是当我跑步时 parseJSON response I get
  • 带有子节点的拖放区域

    我有一个带有多个子节点的拖放区域 主要元素有dropenter and dropleave事件 但是 如果您将文件拖动到主元素内部和子节点上方 则dropleave被触发 如何处理 以便dropleave仅当拖动的元素和鼠标位于主元素之外时
  • 使 div 的大小与其内部图像的大小相同

    我有一个带有以下代码的div HTML div img src img logo png div CSS div imgContainer width 250px height 250px padding 13px 问题是用户可以编辑图像大
  • Electron Auth0Lock“原始文件://不允许”

    尝试让 auth0 与我的电子应用程序一起使用 当我按照默认教程并尝试使用用户名 密码 身份验证进行身份验证时 锁定失败并显示 403 错误 并响应 不允许使用 Origin file 我还在 auth0 仪表板中客户端设置的允许来源 CO
  • 在窗口调整大小和窗口加载时动态调整 pixi 舞台及其内容的大小

    我正在尝试在窗口调整大小时动态调整 pixi 舞台 画布和内容 的大小 并且最初以浏览器窗口的大小加载 而不改变比例 我使用以下内容将初始大小基本上设置为window innerWidth window innerHeight 但它做了一些
  • 如何在 ionic 应用程序中使用 socket.io

    我正在使用 ionic 创建一个应用程序cordova and angular 我必须使用 IP 地址和端口号发出请求 到插座 我读过有关 socket io 的内容 我对如何安装感到困惑套接字 io以及如何与 Angular JS 和 N
  • 只返回 $.ajax 传递的 JSON 数据的前 20 个结果?

    我有以下简单的 jquery 片段 document ready function ajax url myjson json dataType json success function json each json function al
  • Chrome 上的 contenteditable 中未显示编辑光标

    当您打开此页面时 请参阅现场演示 http jsfiddle net gs3p1a6r 3 show 与 Chrome span span CSS myspan border 0 outline 0 JS myspan focus the
  • HTML标题属性样式[重复]

    这个问题在这里已经有答案了 如何在不使用 javascript 或 CSS 的情况下更改以下标记中标题属性的样式 因为我将 HTML 插入到原本无法编辑的文档中的特定位置 span title This is information Thi
  • Microsoft SQL 数据库的 WebSocket 侦听器

    我目前正在开发一个项目 该项目必须使用 WebSockets 作为将数据传输到客户端的方式 基础设施看起来像这样 客户端 gt Web 服务器 gt Microsoft SQL 数据库 我想最理想的情况应该是这样的 客户端打开一个到服务器的

随机推荐