操纵 DOM

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

在本指南中，我们将重点关注使用 Cheerio 操作文档中的元素。我们将涵盖修改元素属性和特性，添加和删除类，修改文本和 HTML 内容，插入和删除元素以及处理错误和调试的方法。在本指南结束时，您将深入了解如何使用这些方法来使用 Cheerio 操作文档中的元素。

修改元素属性和特性

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

// 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 属性。

// 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');

添加和删除类

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

// 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');

修改元素的文本内容

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

// 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')。

修改元素的 HTML 内容

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

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

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

插入新元素

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

// 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>');

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

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');

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

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');

包装和解包元素

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

The wrap() 方法接受一个字符串或一个 Cheerio 对象作为参数，并将元素包装在给定的元素中。

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

The wrapInner() 方法的工作原理类似于 wrap()，但它不是包装元素本身，而是将元素的内部 HTML 包装在给定的元素中。

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

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

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

替换元素

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

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

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

删除元素

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

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

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

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

结论

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