操作 DOM
现在,您已经学会了 Cheerio 使用的基础知识,并获得了一些 加载和遍历文档的经验,是时候深入学习如何 操作元素了。无论你是想修改元素的属性、 添加和删除 class、修改文本和 HTML 内容,还是插入和 删除元素,Cheerio 都提供了一系列方法来帮助你完成这些操作。
在本指南中,我们将重点介绍如何使用 Cheerio 操作文档中的元素。 我们将介绍的一些方法来修改元素属性、 添加和删除 class、修改文本和 HTML 内容、 插 入和删除元素以及处理错误和调试。在学完本指南 时,你将对如何使用 Cheerio 所提供的这些方法来 操作元素有一个很好的了解。
修改元素的属性
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.
要修改单个元素的属性,可以分别使用
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()
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
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
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()
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.
Modifying the HTML Content of an Element
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
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>');
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');
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
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.
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>');
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>');
The unwrap()
method removes the element's
parent element, while keeping the element and its children.
// Unwrap an element
$('p').unwrap();
Replacing Elements
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>');
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
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();
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
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.