NodeJS uses the jQuery selector to operate DOM_jquery

This article describes how NodeJS uses the jQuery selector to operate the DOM. For more information, see * This is an "old" project for more than two years, you can use jQuery selector in NodeJS to operate the backend HTML/XML like the front-end DOM. After removing the browser-compatible code, it is 8 times faster than JSDOM. we have mentioned that JSDOM has a serious performance problem: Debug debugging Node. JS: How do we locate memory leaks and infinite loops?

Cheerio

Quick and flexible. jQuery is used on the server.

Introduction

Test your server-side HTML:

The Code is as follows:

Var cheerio = require ('cheerio '),
$ = Cheerio. load ('Hello World ');
$('H2. title'). text ('Hello there! ');
$('H2 '). addClass ('Welcome ');
Pai.html ();
// => Hello there!

Install

Npm install cheerio

Function

❤Familiar Syntax: Cheerio implements a subset of jQuery's core. Cheerio removes all DOM from the jQuery library, which is not necessarily compatible with the browser, and presents its truly gorgeous API.

Extremely fast: Cheerio uses a very simple and consistent DOM model. In this way, operations and presentation will bring incredible performance improvements. Preliminary end-to-end benchmark tests show that Cheerio is about eight times faster than JSDOM.

Amazing flexibility: compatible with htmlparser2API. Cheerio can parse almost all HTML or XML documents.

How about JSDOM?

I write Cheerio because I am getting increasingly disappointed with JSOM. For me, there are three key points I have encountered again and again:

• The built-in parser of JSDOM is too strict: the HTML Parser bound by JSDOM cannot process many popular websites.

• JSDOM is too slow: there is a significant delay in parsing large websites and JSDOM.

• JSDOM feels too heavy: the purpose of JSDOM is to provide the same DOM environment as we see in the browser (note * executable JavaScript ). I have never really needed these things. I only want a simple and familiar method for HTML operations.

When to use JSDOM

Cheerio cannot solve all your problems. If I need to work in a browser-like environment, I will still use JSDOM, especially when I want to perform automated functional testing on the server.

API

We will use the sample HTML code:

The Code is as follows:

• Apple


• Orange


• Pear

Load

First, you need to load HTML. This step is automatically completed in jQuery, because jQuery runs in a Real-Time DOM environment. We need to pass the HTML document into Cheerio.

This is the preferred method:

The Code is as follows:

Var cheerio = require ('cheerio '),
$ = Cheerio. load ('

...

');

In addition, you can pass HTML as a string parameter:

The Code is as follows:

$ = Require ('cheerio ');
$ ('Ul ','

...

');

Or as the root node

The Code is as follows:

$ = Require ('cheerio ');
$ ('Lil', 'ul ','

...

');

You can also load the default resolution options you need to modify through an additional. load:

The Code is as follows:

$ = Cheerio. load ('

...

',{
NormalizeWhitespace: true,
XmlMode: true
});

These resolution options are directly borrowed from htmlparser2, so any parameters that can be used in htmlparser2 are also valid in cheerio. The default options are:

The Code is as follows:

{
NormalizeWhitespace: false,
XmlMode: false,
DecodeEntities: true
}

Selectors Selector

The Cheerio selector is almost identical to jQuery, so the API is very similar.

The Code is as follows:

$ (Selector, [context], [root])

The selector selects elements in the order of root [root, optional]-> context [context, optional]-> selector. The selector and context can be a string expression, DOM element, and DOM element array. Generally, a root document is the root element of an HTML document.

Like jQuery, this method will traverse and manipulate documents from the starting point. It is the main method for selecting elements from the document, but it is not like building a CSSSelect Library (Sizzle selector) Like jQuery ).

The Code is as follows:

$ ('. Apple',' # fruits '). text ()
// => Apple
$ ('Ul. pear '). attr ('class ')
// => Pear
Certificate ('li?class=orange='{.html ()
// =>

Orange

Attributes

Obtain and modify attributes.

. Attr (name, value)

The method used to obtain and set attributes. Obtain only the attribute values of the First Matching Element. If the attribute value is set to null, the attribute is deleted. You can also pass in map and function like jQuery.

The Code is as follows:

$ ('Ul '). attr ('id ')
// => Fruits
$ ('. Apple'). attr ('id', 'favorite'0000.html ()
// =>

Apple

. Data (name, value)

The method used to obtain and set data attributes. Gets or sets the first element used for matching only.

The Code is as follows:

$ ('

'). Data ()
// =>{ AppleColor: 'red '}
$ ('

'). Data ('data-apple-color ')
// => 'Red'
Var apple = $ ('. apple'). data ('kind', 'mac ')
Apple. data ('kind ')
// => 'Mac'
. Val ([value])

The method used to obtain and set input, select, and textarea values. Note: map is supported, and function is not added yet.

The Code is as follows:

$ ('Input [type = "text"] '). val ()
// => Input_text
$ ('Input [type = "text" comment '0000.val('test'0000.html ()
// =>

For more APIs, see the official website.