NodeJS uses the jQuery selector to operate DOM_jquery

Source: Internet
Author: User
Tags sample html code
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?


Quick and flexible. jQuery is used on the server.


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!


Npm install cheerio


❤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.


We will use the sample HTML code:

The Code is as follows:

  • Apple

  • Orange

  • Pear


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.

    Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.