Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery/cheerio selector, context and root - what's the difference?

I'm new to Javascript and would like to use the library Cheerio to do some webscraping. Came across this text in the introduction to the library. Am not sure what the difference is between a selector, context and root.

Extract from documentation:

Cheerio's selector implementation is nearly identical to jQuery's, so the API is very similar.

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

selector searches within the context scope which searches within the root scope. selector and context can be an string expression, DOM Element, array of DOM elements, or cheerio object. root is typically the HTML document string.

This selector method is the starting point for traversing and manipulating the document. Like jQuery, it's the primary method for selecting elements in the document, but unlike jQuery it's built on top of the CSSSelect library, which implements most of the Sizzle selectors.

Example API:

<ul id="fruits">
  <li class="apple">Apple</li>
  <li class="orange">Orange</li>
  <li class="pear">Pear</li>
</ul>

$('.apple', '#fruits').text() //=> Apple

$('ul .pear').attr('class') //=> pear

$('li[class=orange]').html() //=> Orange


In the first example, .apple is the selector, and #fruits is the context. That makes sense. In the second example, is ul the selector and .pear the context? If the selector is meant to search within the context, that's strange given that .pear is nested in ul?

like image 626
runawaykid Avatar asked Oct 29 '16 09:10

runawaykid


People also ask

What is context in jQuery selector?

jQuery( selector [, context ] )Returns: jQuery. Description: Accepts a string containing a CSS selector which is then used to match a set of elements.

What is Cheeriojs?

Cheerio js is a Javascript technology used for web-scraping in server-side implementations. Web-scraping is a scripted method of extracting data from a website that can be tailored to your use-case. NodeJS is often used as the server-side platform.

Does Cheerio use jQuery?

Cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server.

What is node Cheerio?

Cheerio is a tool for parsing HTML and XML in Node. js, and is very popular with over 23k stars on GitHub. It is fast, flexible, and easy to use. Since it implements a subset of JQuery, it's easy to start using Cheerio if you're already familiar with JQuery.


1 Answers

jQuery, and in extension Cheerio, uses something called "context", and it does have a special meaning.

The context is where jQuery will search for the given selector, so in plain JS the equivalent would be

document.getElementById('#fruit');

where document is the context, and #fruit is the selector.

The default context in Cheerio is always document, unless another context is specifically given in the format

$(selector, context)

The selector only has context if it's two strings, separated by a comma, so something like this would still use document as context

$('#fruit, .apple')

and it would search for both elements, not one inside the other etc. because it's just one string, containing a comma, so it's not the same thing.

The first one of your examples is the only one with a special context, the other two has document as context, and are regular CSS selectors.

$('.apple', '#fruits')

^ This has context, and would be the exact same as $('#fruits').find('.apple')

$('ul .pear')

^ This does not have a special context, it just selects all .pear elements inside an UL

$('li[class=orange]')

^ This does not have a special context either, it selects all LI elements with a class attribute that perfectly matches orange, i.e. has no other classes

like image 169
adeneo Avatar answered Nov 02 '22 07:11

adeneo