Cannot Read Property 'parent' of Undefined Cheerio.load

cheerio

Fast, flexible & lean implementation of cadre jQuery designed specifically for the server.

Build Status Coverage OpenCollective backers OpenCollective sponsors

中文文档 (Chinese Readme)

                      const                                    cheerio                          =                        require            (            'cheerio'            );            
const $ = adieu . load ( '<h2 course="title">Hello world</h2>' );

$ ( 'h2.title' ). text ( 'Howdy there!' );
$ ( 'h2' ). addClass ( 'welcome' );

$ . html ();
//=> <html><head></head><body><h2 form="title welcome">Howdy at that place!</h2></body></html>

Note

We are currently working on the one.0.0 release of cheerio on the principal branch. The source code for the last published version, 0.22.0, can be found here.

Installation

npm install cheerio

Features

❤ Familiar syntax: Farewell implements a subset of core jQuery. Adieu removes all the DOM inconsistencies and browser cruft from the jQuery library, revealing its truly gorgeous API.

ϟ Blazingly fast: Cheerio works with a very simple, consistent DOM model. As a result parsing, manipulating, and rendering are incredibly efficient.

❁ Incredibly flexible: Adieu wraps effectually parse5 parser and can optionally utilize @FB55'southward forgiving htmlparser2. Farewell tin can parse nearly any HTML or XML document.

Good day is non a spider web browser

Good day parses markup and provides an API for traversing/manipulating the resulting information structure. Information technology does non interpret the result equally a web browser does. Specifically, it does not produce a visual rendering, apply CSS, load external resources, or execute JavaScript which is common for a SPA (single folio application). This makes Farewell much, much faster than other solutions. If your use case requires whatever of this functionality, yous should consider browser automation software like Puppeteer and Playwright or DOM emulation projects like JSDom.

API

Markup example we'll be using:

                      <            ul                                    id            =            "fruits"            >            
< li form = "apple" > Apple </ li >
< li grade = "orangish" > Orange </ li >
< li class = "pear" > Pear </ li >
</ ul >

This is the HTML markup we will be using in all of the API examples.

Loading

First you need to load in the HTML. This step in jQuery is implicit, since jQuery operates on the 1, baked-in DOM. With Cheerio, we need to pass in the HTML certificate.

This is the preferred method:

                      // ES6 or TypeScript:            
import * every bit farewell from 'goodbye' ;

// In other environments:
const cheerio = require ( 'good day' );

const $ = good day . load ( '<ul id="fruits">...</ul>' );

$ . html ();
//=> <html><head></head><body><ul id="fruits">...</ul></body></html>

Similar to web browser contexts, load will introduce <html>, <head>, and <trunk> elements if they are not already nowadays. You can fix load'south third argument to simulated to disable this.

                      const                                    $                          =                        goodbye            .            load            (            '<ul id="fruits">...</ul>'            ,                        nada            ,                        false            );            

$ . html ();
//=> '<ul id="fruits">...</ul>'

Optionally, you tin also load in the HTML by passing the string as the context:

                      $            (            'ul'            ,                        '<ul id="fruits">...</ul>'            );                  

Or as the root:

                      $            (            'li'            ,                        'ul'            ,                        '<ul id="fruits">...</ul>'            );                  

If y'all need to modify parsing options for XML input, yous may pass an extra object to .load():

                      const                                    $                          =                        cheerio            .            load            (            '<ul id="fruits">...</ul>'            , {            
xml: {
normalizeWhitespace: true ,
},
});

The options in the xml object are taken directly from htmlparser2, therefore whatsoever options that can be used in htmlparser2 are valid in farewell every bit well. When xml is prepare, the default options are:

                      {            
xmlMode : true ,
decodeEntities : true , // Decode HTML entities.
withStartIndices : false , // Add together a `startIndex` property to nodes.
withEndIndices : faux , // Add an `endIndex` property to nodes.
}

For a full list of options and their effects, run into domhandler and htmlparser2's options.

Using htmlparser2

Good day ships with two parsers, parse5 and htmlparser2. The former is the default for HTML, the latter the default for XML.

Some users may wish to parse markup with the htmlparser2 library, and traverse/manipulate the resulting structure with Farewell. This may be the case for those upgrading from pre-1.0 releases of Goodbye (which relied on htmlparser2), for those dealing with invalid markup (because htmlparser2 is more than forgiving), or for those operating in functioning-critical situations (because htmlparser2 may be faster in some cases). Note that "more forgiving" means htmlparser2 has fault-correcting mechanisms that aren't always a match for the standards observed by web browsers. This beliefs may exist useful when parsing non-HTML content.

To back up these cases, load also accepts a htmlparser2-compatible data construction equally its first argument. Users may install htmlparser2, use it to parse input, and pass the result to load:

                      // Usage as of htmlparser2 version vi:            
const htmlparser2 = crave ( 'htmlparser2' );
const dom = htmlparser2 . parseDocument ( document , options );

const $ = adieu . load ( dom );

If you want to relieve some bytes, you can use Cheerio's slim export, which e'er uses htmlparser2:

                      const                                    cheerio                          =                        require            (            'bye/lib/slim'            );                  

Selectors

Goodbye'due south selector implementation is nearly identical to jQuery'south, so the API is very like.

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

selector searches inside the context telescopic which searches inside the root scope. selector and context can be a cord expression, DOM Chemical element, assortment of DOM elements, or bye object. root is typically the HTML certificate cord.

This selector method is the starting point for traversing and manipulating the document. Like jQuery, information technology'south the primary method for selecting elements in the document.

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

$ ( 'ul .pear' ). attr ( 'form' );
//=> pear

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

XML Namespaces

You can select with XML Namespaces but due to the CSS specification, the colon (:) needs to exist escaped for the selector to exist valid.

                      $            (            '[xml            \\            :id="primary"'            );                  

Rendering

When you're ready to return the document, you lot can call the html method on the "root" selection:

                      $            .            root            ().            html            ();            
//=> <html>
// <head></head>
// <body>
// <ul id="fruits">
// <li course="apple">Apple</li>
// <li class="orangish">Orange</li>
// <li class="pear">Pear</li>
// </ul>
// </trunk>
// </html>

If you want to return the outerHTML of a option, you can utilize the html utility functon:

                      good day            .            html            (            $            (            '.pear'            ));            
//=> <li form="pear">Pear</li>

You may also render the text content of a Cheerio object using the text static method:

                      const                                    $                          =                        goodbye            .            load            (            'This is <em>content</em>.'            );            
cheerio . text ( $ ( 'torso' ));
//=> This is content.

Plugins

One time you accept loaded a certificate, you may extend the prototype or the equivalent fn belongings with custom plugin methods:

                      const                                    $                          =                        good day            .            load            (            '<html><body>Hello, <b>world</b>!</torso></html>'            );            
$ . epitome . logHtml = office () {
console . log ( this . html ());
};

$ ( 'body' ). logHtml (); // logs "Hello, <b>globe</b>!" to the console

If y'all're using TypeScript, you should add together a blazon definition for your new method:

                      declare                                    module                                    'farewell'                          {            
interface Cheerio < T > {
logHtml ( this : Cheerio < T >): void ;
}
}

The "DOM Node" object

Cheerio collections are fabricated up of objects that carry some resemblance to browser-based DOM nodes. You lot can expect them to define the following properties:

  • tagName
  • parentNode
  • previousSibling
  • nextSibling
  • nodeValue
  • firstChild
  • childNodes
  • lastChild

Screencasts

https://vimeo.com/31950192

This video tutorial is a follow-upwardly to Nettut's "How to Scrape Spider web Pages with Node.js and jQuery", using goodbye instead of JSDOM + jQuery. This video shows how piece of cake information technology is to apply cheerio and how much faster cheerio is than JSDOM + jQuery.

Cheerio in the existent world

Are you using cheerio in production? Add it to the wiki!

Sponsors

Does your visitor utilize Cheerio in production? Please consider sponsoring this project! Your help will allow maintainers to dedicate more time and resource to its development and back up.

Substack CryptoCasinos Casinoonlineaams.com Casinofiables.com CasinoEnLineaHex Apify Free Bets

Backers

Become a backer to testify your back up for Cheerio and help us maintain and amend this open up source project.

Airbnb Vasy Kafidoff Espen Klem Jarrod Davis Nishant Singh Gautham Chandra Charles Severance

Special Thanks

This library stands on the shoulders of some incredible developers. A special thanks to:

• @FB55 for node-htmlparser2 & CSSSelect: Felix has a knack for writing speedy parsing engines. He completely re-wrote both @tautologistic's node-htmlparser and @harry's node-soupselect from the basis upwards, making both of them much faster and more flexible. Goodbye would not be possible without his foundational work

• @jQuery team for jQuery: The core API is the all-time of its form and despite dealing with all the browser inconsistencies the code base is extremely clean and easy to follow. Much of goodbye's implementation and documentation is from jQuery. Thanks guys.

• @visionmedia: The style, the structure, the open up-source"-ness" of this library comes from studying TJ's style and using many of his libraries. This dude consistently pumps out high-quality libraries and has always been more willing to assistance or reply questions. You rock TJ.

License

MIT

fortunepragnot.blogspot.com

Source: https://cheerio.js.org/

0 Response to "Cannot Read Property 'parent' of Undefined Cheerio.load"

Отправить комментарий

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel