5月29日 00:51

Cheerio 有哪些 DOM 操作方法？修改和读取分别怎么用？

Cheerio 的 DOM 操作分两大类：读取和修改。读取用 .text() .html() .attr() .val() 获取内容；修改用 .append() .prepend() .after() .before() 插入节点，.remove() .empty() 删除，.replaceWith() 替换。关键是区分内部插入（append/prepend，插入子节点）和外部插入（after/before，插入兄弟节点）。遍历用 .find() .children() .parent() .closest() .siblings() 在节点树中移动。

追问

append 和 after 有什么区别？ .append() 是内部插入，把新节点加为目标元素的最后一个子节点；.after() 是外部插入，把新节点放在目标元素后面作为兄弟节点。记忆方式：append 是往肚子里塞，after 是站在旁边。

remove 和 empty 有什么区别？ .remove() 连元素本身一起删除；.empty() 只清空内容，元素标签保留。爬虫场景中 .empty() 常用于清空某个容器再重新填入清洗后的数据。

怎么批量提取数据并转成数组？ 用 .map() + .get() 组合：$('.item').map((i, el) => $(el).text()).get()。.map() 返回 cheerio 对象，.get() 转为普通数组，否则无法用 Array 方法。

.find() 和 .children() 有什么区别？ .find() 搜索所有后代元素（含孙子节点），.children() 只找直接子元素。性能上 .children() 更快，层级确定时优先使用。

怎么克隆一个节点并插入到其他位置？ .clone() 深拷贝节点，返回独立的 cheerio 对象，可链式调用 .appendTo() 或 .insertAfter() 插入。注意 clone 不会复制 data 和事件绑定。

写段代码

javascript
const $ = cheerio.load(html);
// 读取：提取所有文章标题和链接
const articles = $('.post').map((i, el) => ({
  title: $(el).find('h2').text(),
  link: $(el).find('a').attr('href')
})).get();

// 修改：给外链加 target 并移除广告
$('a[href^="http"]').attr('target', '_blank');
$('.ad').remove();

标签：NodeJS Cheerio