操作 DOM

¥Manipulating the DOM

现在你已经了解了使用 Cheerio 的基础知识，并获得了一些加载和遍历文档的经验，是时候更深入地了解元素的操作了。无论你想要修改元素属性、添加和删除类、修改文本和 HTML 内容，还是插入和删除元素，Cheerio 都提供了一系列方法来帮助你完成这些操作。

¥Now that you have learned the basics of using Cheerio and have gained some experience with loading and traversing documents, it's time to dive deeper into manipulating elements. Whether you want to modify element attributes and properties, add and remove classes, modify text and HTML content, or insert and remove elements, Cheerio provides a range of methods to help you do so.

在本指南中，我们将特别关注使用 Cheerio 操作文档中的元素。我们将介绍修改元素属性和属性、添加和删除类、修改文本和 HTML 内容、插入和删除元素以及处理错误和调试的方法。在本指南结束时，你将很好地了解如何使用这些方法通过 Cheerio 来操作文档中的元素。

¥In this guide, we will focus specifically on manipulating elements within a document using Cheerio. We will cover methods for modifying element attributes and properties, adding and removing classes, modifying text and HTML content, inserting and removing elements, and handling errors and debugging. By the end of this guide, you will have a good understanding of how to use these methods to manipulate elements within a document using Cheerio.

修改元素属性和特性

¥Modifying Element Attributes and Properties

要修改单个元素的属性和特性，可以分别使用 attr() 和 prop() 方法。这两种方法都采用键和值作为参数，并允许你获取和设置特性或属性。设置时，它们适用于选择中的所有元素；获取时，它们返回与选择中的第一个元素相对应的单个值。

¥To modify the attributes and properties of a single element, you can use the attr() and prop() methods, respectively. Both methods take a key and a value as arguments, and allow you to get and set the attribute or property. When setting, they apply to all elements in the selection; when getting, they return a single value corresponding to the first element in the selection.

// Set the 'src' attribute of an image element
$('img').attr('src', 'https://example.com/image.jpg');

// Set the 'checked' property of a checkbox element
$('input[type="checkbox"]').prop('checked', true);

// Get the 'href' attribute of a link element
const href = $('a').attr('href');

// Get the 'disabled' property of a button element
const isDisabled = $('button').prop('disabled');

prop() 不限于字符串和布尔值等简单值。你还可以使用它来获取复杂的属性，例如 style 对象，或解析受支持元素的 href 或 src URL。你还可以使用它来获取单个元素的 tagName、innerHTML、outerHTML、textContent 和 innerText 属性。

¥prop() is not limited to simple values like strings and booleans. You can also use it to get complex properties like the style object, or to resolve href or src URLs of supported elements. You can also use it to get the tagName, innerHTML, outerHTML, textContent, and innerText properties of a single element.

// Get the `style` object of an element
const style = $('div').prop('style');

// Get the resolved `src` URL of an image element
$('img').prop('src');

// Get the outerHTML of an element
const outerHTML = $('div').prop('outerHTML');

// Get the innerText of an element
const innerText = $('div').prop('innerText');

添加和删除类

¥Adding and Removing Classes

要从元素添加或删除类，可以使用 addClass()、removeClass() 和 toggleClass() 方法。所有三个方法都采用类名或以空格分隔的类名列表作为参数。他们修改选择中的所有元素。

¥To add or remove classes from an element, you can use the addClass(), removeClass(), and toggleClass() methods. All three methods take a class name or a space-separated list of class names as an argument. They modify all elements in the selection.

// Add a class to an element
$('div').addClass('new-class');

// Add multiple classes to an element
$('div').addClass('new-class another-class');

// Remove a class from an element
$('div').removeClass('old-class');

// Remove multiple classes from an element
$('div').removeClass('old-class another-class');

// Toggle a class on an element (add if it doesn't exist, remove if it does)
$('div').toggleClass('active');

修改元素的文本内容

¥Modifying the Text Content of an Element

要查询或修改元素的文本内容，可以使用 text() 方法。给定一个字符串作为参数，它将选择中每个元素的文本内容设置为给定的字符串。如果没有参数，它会返回选择中每个元素（包括其后代）的文本内容，并连接在一起。

¥To query or modify the text content of an element, you can use the text() method. Given a string as an argument, it sets the text content of every element in the selection to the given string. Without arguments, it returns the text content of every element (including its descendants) in the selection, concatenated together.

// Set the text content of an element
$('h1').text('Hello, World!');

// Get the text content of an element
const text = $('p').text();

注意

text() 返回所有传递元素的 textContent。结果将包括 <script> 和 <style> 元素的内容。为了避免这种情况，请改用 .prop('innerText')。

¥text() returns the textContent of all passed elements. The result will include the contents of <script> and <style> elements. To avoid this, use .prop('innerText') instead.

修改元素的 HTML 内容

¥Modifying the HTML Content of an Element

要查询或修改元素的 HTML 内容，可以使用 html() 方法。给定一个 HTML 字符串作为参数，它将选择中每个元素的内部 HTML 设置为给定的字符串。如果没有参数，它将返回选择中第一个元素的内部 HTML。

¥To query or modify the HTML content of an element, you can use the html() method. Given an HTML string as an argument, it sets the inner HTML of every element in the selection to the given string. Without arguments, it returns the inner HTML of the first element in the selection.

// Set the inner HTML of an element
$('div').html('<p>Hello, World!</p>');

// Get the inner HTML of an element
const html = $('div').html();

插入新元素

¥Inserting New Elements

要将新元素插入到文档中，可以使用 append()、prepend()、before() 和 after() 方法。这些会修改选择中的每个元素。

¥To insert new elements into a document, you can use the append(), prepend(), before(), and after() methods. These modify every element in the selection.

// Append an element to the end of a parent element
$('ul').append('<li>Item</li>');

// Prepend an element to the beginning of a parent element
$('ul').prepend('<li>Item</li>');

// Insert an element before a target element
$('li').before('<li>Item</li>');

// Insert an element after a target element
$('li').after('<li>Item</li>');

insertAfter() 和 insertBefore() 方法允许你分别在目标元素之前或之后插入元素。这两种方法都采用字符串或 Cheerio 对象作为参数，并在目标元素之前或之后插入给定元素。

¥The insertAfter() and insertBefore() methods allow you to insert an element before or after a target element, respectively. Both methods take a string or a Cheerio object as an argument and insert the given element before or after the target element.

const $ = require('cheerio');

// Insert an element after a target element
$('<p>Inserted element</p>').insertAfter('h1');

// Insert an element before a target element
$('<p>Inserted element</p>').insertBefore('h1');

prependTo() 和 appendTo() 方法允许你分别将元素前置或追加到父元素。这两种方法都采用字符串或 Cheerio 对象作为参数，并将元素插入到给定父元素的开头或结尾。

¥The prependTo() and appendTo() methods allow you to prepend or append an element to a parent element, respectively. Both methods take a string or a Cheerio object as an argument and insert the element at the beginning or end of the given parent element.

const $ = require('cheerio');

// Prepend an element to a parent element
$('<p>Inserted element</p>').prependTo('div');

// Append an element to a parent element
$('<p>Inserted element</p>').appendTo('div');

封装和解封装元素

¥Wrapping and Unwrapping Elements

有时你可能希望将一个元素封装在另一个元素中，或者删除该元素的父元素，同时保留其子元素。为此，你可以使用 wrap()、wrapInner() 和 unwrap() 方法。

¥Sometimes you may want to wrap an element in another element, or remove the element's parent element while keeping its children. To do this, you can use the wrap(), wrapInner(), and unwrap() methods.

wrap() 方法采用字符串或 Cheerio 对象作为参数，并将该元素封装在给定元素中。

¥The wrap() method takes a string or a Cheerio object as an argument and wraps the element in the given element.

// Wrap an element in a div
$('p').wrap('<div></div>');

wrapInner() 方法的工作方式与 wrap() 类似，但它不是封装元素本身，而是将元素的内部 HTML 封装在给定元素中。

¥The wrapInner() method works similar to wrap(), but instead of wrapping the element itself, it wraps the element's inner HTML in the given element.

// Wrap the inner HTML of an element in a div
$('div').wrapInner('<div></div>');

unwrap() 方法删除元素的父元素，同时保留元素及其子元素。

¥The unwrap() method removes the element's parent element, while keeping the element and its children.

// Unwrap an element
$('p').unwrap();

更换元素

¥Replacing Elements

要将一个元素替换为另一个元素，可以使用 replaceWith() 方法。它采用字符串或 Cheerio 对象作为参数，并将选择中的每个元素替换为给定元素。

¥To replace an element with another element, you can use the replaceWith() method. It takes a string or a Cheerio object as an argument and replaces each element in the selection with the given element.

// Replace an element with another element
$('li').replaceWith('<li>Item</li>');

请注意，replaceWith() 方法从文档中删除元素并将其替换为给定元素或 HTML 字符串。如果要保留该元素并修改其内容，可以使用 html() 或 text() 方法。

¥Note that the replaceWith() method removes the element from the document and replaces it with the given element or HTML string. If you want to keep the element and modify its contents, you can use the html() or text() methods instead.

删除元素

¥Removing Elements

要从文档中删除元素，可以使用 remove() 方法。它从文档中删除所选内容中的每个元素及其所有子元素。

¥To remove an element from a document, you can use the remove() method. It removes each element in the selection, and all of their children, from the document.

// Remove an element from the document
$('li').remove();

或者，你可以使用 empty() 方法从文档中删除元素的子元素，而不删除元素本身。它从文档中删除所选内容中每个元素的子元素（但不包括文本节点或注释）。

¥Alternatively, you can remove the children of an element from the document, without removing the element itself, using the empty() method. It removes the children (but not text nodes or comments) of each element in the selection from the document.

// Remove an element's children from the document
$('li').empty();

结论

¥Conclusion

我们学习了如何使用 Cheerio 操作文档中的元素。我们可以修改元素属性、添加和删除类、修改文本和 HTML 内容、插入和删除元素以及处理错误和调试代码。使用这些工具，你可以轻松地操作文档以满足你的需要。

¥We learned how to manipulate elements within a document using Cheerio. We can modify element attributes and properties, add and remove classes, modify text and HTML content, insert and remove elements, and handle errors and debug our code. With these tools, you can easily manipulate a document to suit your needs.