NodeJS使用jQuery选择器操作DOM

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

时间: 2024-09-25 14:16:37

NodeJS使用jQuery选择器操作DOM的相关文章

NodeJS使用jQuery选择器操作DOM_jquery

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

浅谈jQuery 选择器和dom操作_jquery

浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class 和标签名来查找DOM元素.这个非常重要,下面的内容都是以此为基础,逐级提高的. 1)."$("#id")",获取id指定的元素,id是全局唯一的,所以它只有一个成员. 2)."$(".class")",获取class指定的元素,不同的元素可以具有相同的class属性

jQuery 选择器、DOM操作、事件、动画_jquery

Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象 选择器 1, 判断页面是否存在某元素:if($("#tt").length>0){} 或者if($("#tt")[0]){}; 2, 基本选择器 $("#test") 选择id为test的元素 $(".test

jQuery选择器选择dom元素

jQuery选择器其实是一个有些地方比较费解的,如果没有经过多次实验的话,很难得出它 的每个操作符到底是干什么的,很容易出错,经过我的多次测试,终于对一些比较难理解或 容易出错的选择操作进行总结,既方便自己将来查询又方便初学者学习.如果哪里有不对的 还望大家帮我指出来,这里是一个相互学习的地方. 1. 先说说通过位置选择的几个 操作: :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页 面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且

跟我学jquery(二)大话jquery选择器 .

本篇博客我将带大家来学习一下jquery的第一个比较重要的知识点,这个知识点对学习jquery的同学来说是必须掌握的,因为他是所有操作的基础,这个知识点就是jquery的对象选择器,我们利用jquery的操作都是基于对象上的,我们只有正确的选择好了我们要操作的对象,我们才能进行我们下一步的操作.jQuery的选择器是什么方便的,我们几乎可以利用它获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 什么是jquery选择器 在Dom编程中我们只能使用有限的函数根据id或者TagNam

jQuery选择器总结

一. 什么是jQuery选择器 在Dom编程中我们只能使用有限的函数根据id或者TagName获取Dom对象. 在jQuery中则完全不同,jQuery提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery包装集的形式返回. 首先来看看什么是选择器:     //根据ID获取jQuery包装集   var jQueryObject = $("#testDiv"); 上例中使用了ID选择器, 选取id为testDiv的Dom对象并将它放入jQuery包装集, 最后

jQuery操作DOM元素

原文:jQuery操作DOM元素 jQuery操作DOM元素 HTML DOM常见操作: 查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点.   查找节点 关于节点的查找,是利用选择器完成的. 在上一篇jQuery选择器中已经介绍过了:http://www.cnblogs.com/mengdd/p/4211663.html   插入节点 首先看一个例子,用原生的JavaScript如何创建并添加元素: <!DOCTYPE html> <html> <head>

JQuery (简化dom操作)

简介 JQuery本质是一个js文件,里面是js常用功能的封装.比如绑定事件,修改内容,修改样式等. $()是一个函数,是jQuery()的简写,它的一些重载函数见下. $(elements) 将一个或多个dom对象(原生js获取到的dom对象)转化为jQuery对象. $('#id1').html() //返回id为id1的jQuery对象,然后调用html()方法.此方法依然返回jQuery对象,可以链式调用. document.getElementById("id1").inne

jQuery 中的 DOM 操作_jquery

DOM(Document Object Model-文档对象模型):一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML HTML DOM: 使用 JavaScript和 DOM 为 HTML文件编写脚本时, 有许多专属于 HT