What are some common methods provided by Cheerio for DOM manipulation?

Cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server to parse, manipulate, and render HTML. It provides an API that can be used to manipulate the DOM in a way that is familiar to developers who have experience with jQuery.

Here are some common methods provided by Cheerio for DOM manipulation:

1. Selection:

   • $(selector): Selects elements in the DOM. Works like jQuery's $.
   • .find(selector): Get the descendants of each element in the current set of matched elements, filtered by a selector.

2. Traversal:

   • .parent(): Get the parent of each element in the current set of matched elements.
   • .parents([selector]): Get a set of parents filtered by a selector.
   • .closest(selector): Get the first element that matches the selector by testing the element itself and traversing up through its ancestors.
   • .children([selector]): Get the children of each element in the set of matched elements, optionally filtered by a selector.
   • .siblings([selector]): Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
   • .next(): Get the immediately following sibling of each element in the set of matched elements.
   • .prev(): Get the immediately preceding sibling of each element in the set of matched elements.
   • .eq(index): Reduce the set of matched elements to the one at the specified index.

3. Manipulation:

   • .append(content): Insert content, specified by the parameter, to the end of each element in the set of matched elements.
   • .prepend(content): Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
   • .after(content): Insert content after each element in the set of matched elements.
   • .before(content): Insert content before each element in the set of matched elements.
   • .remove([selector]): Remove the set of matched elements from the DOM.
   • .replaceWith(content): Replace each element in the set of matched elements with the provided new content.
   • .empty(): Remove all child nodes of the set of matched elements from the DOM.
   • .html([htmlString]): Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.
   • .text([textString]): Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.

4. Attributes and Properties:

   • .attr(attributeName, [value]): Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
   • .removeAttr(attributeName): Remove an attribute from each element in the set of matched elements.
   • .hasClass(className): Determine whether any of the matched elements are assigned the given class.
   • .addClass(className): Adds the specified class(es) to each element in the set of matched elements.
   • .removeClass([className]): Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
   • .toggleClass(className): Add or remove one or more classes from each element in the set of matched elements, depending on the class's presence.

5. CSS:

   • .css(propertyName, [value]): Get the computed style properties for the first element in the set of matched elements or set one or more CSS properties for every matched element.

6. Forms:

   • .val([value]): Get the current value of the first element in the set of matched elements or set the value of every matched element.

Here's an example of how you might use some of these methods in a Cheerio script:

const cheerio = require('cheerio');

// Load HTML string
const html = `
  <ul id="fruits">
    <li class="apple">Apple</li>
    <li class="orange">Orange</li>
    <li class="pear">Pear</li>
  </ul>
`;

// Parse HTML and load it into Cheerio
const $ = cheerio.load(html);

// Select the list with the ID 'fruits'
const fruitList = $('#fruits');

// Append a new list item
fruitList.append('<li class="banana">Banana</li>');

// Remove the class 'pear' from the list
$('.pear').removeClass('pear');

// Get the HTML of the updated list
const updatedListHtml = fruitList.html();
console.log(updatedListHtml);

This example demonstrates how to select elements, manipulate the DOM by adding and removing classes, and retrieve the updated HTML.