Cheerio 的 DOM 操作方法有哪些？如何使用这些方法？ - 面试题

Cheerio 提供了丰富的 DOM 操作方法，与 jQuery 的 API 高度兼容。以下是常用的 DOM 操作方法：

1. 获取和设置内容

javascript
// 获取文本内容
$('p').text();                    // 获取第一个匹配元素的文本
$('p').text('New text');          // 设置所有匹配元素的文本

// 获取 HTML 内容
$('.container').html();           // 获取第一个匹配元素的 HTML
$('.container').html('<p>New</p>'); // 设置所有匹配元素的 HTML

// 获取表单值
$('input').val();                 // 获取输入值
$('input').val('new value');      // 设置输入值

// 获取属性值
$('a').attr('href');              // 获取 href 属性
$('a').attr('href', 'new-url');   // 设置 href 属性
$('a').attr({                     // 设置多个属性
  href: 'new-url',
  target: '_blank'
});
$('a').removeAttr('target');      // 移除属性

// 获取数据属性
$('div').data('id');              // 获取 data-id
$('div').data('id', '123');       // 设置 data-id

2. CSS 类操作

javascript
// 添加类
$('div').addClass('active');
$('div').addClass('active highlight');

// 移除类
$('div').removeClass('active');
$('div').removeClass('active highlight');

// 切换类
$('div').toggleClass('active');

// 检查类
$('div').hasClass('active');      // 返回 true/false

// 获取类名
$('div').attr('class');           // 获取所有类名

3. CSS 样式操作

javascript
// 获取样式
$('div').css('color');            // 获取 color 样式

// 设置样式
$('div').css('color', 'red');
$('div').css({                    // 设置多个样式
  color: 'red',
  fontSize: '14px',
  backgroundColor: '#f0f0f0'
});

4. DOM 遍历

javascript
// 查找子元素
$('div').find('p');               // 查找所有后代 p
$('div').children();              // 获取直接子元素
$('div').children('p');           // 获取直接子元素 p

// 父元素
$('p').parent();                  // 获取直接父元素
$('p').parents();                 // 获取所有祖先元素
$('p').parents('.container');     // 获取匹配的祖先元素
$('p').closest('.container');     // 获取最近的匹配祖先

// 兄弟元素
$('p').next();                    // 下一个兄弟元素
$('p').prev();                    // 上一个兄弟元素
$('p').nextAll();                 // 之后的所有兄弟元素
$('p').prevAll();                 // 之前的所有兄弟元素
$('p').siblings();                // 所有兄弟元素
$('p').siblings('.active');       // 匹配的兄弟元素

5. DOM 插入

javascript
// 内部插入
$('div').append('<p>New paragraph</p>');      // 在元素末尾插入
$('<p>New</p>').appendTo('div');              // 插入到元素末尾
$('div').prepend('<p>New paragraph</p>');    // 在元素开头插入
$('<p>New</p>').prependTo('div');            // 插入到元素开头

// 外部插入
$('div').after('<p>New paragraph</p>');      // 在元素之后插入
$('<p>New</p>').insertAfter('div');          // 插入到元素之后
$('div').before('<p>New paragraph</p>');     // 在元素之前插入
$('<p>New</p>').insertBefore('div');        // 插入到元素之前

// 替换
$('p').replaceWith('<div>New</div>');        // 替换元素
$('<div>New</div>').replaceAll('p');         // 替换所有匹配元素

6. DOM 删除

javascript
// 删除元素
$('p').remove();                  // 删除匹配的元素及其子元素
$('p').empty();                   // 清空元素内容，保留元素本身

// 分离元素
const $detached = $('p').detach(); // 删除元素但保留数据和事件

7. DOM 复制

javascript
// 克隆元素
const $clone = $('div').clone();   // 克隆元素
const $cloneWithEvents = $('div').clone(true); // 克隆元素并复制事件

8. 元素过滤

javascript
// 过滤元素
$('li').filter('.active');        // 保留匹配的元素
$('li').not('.active');           // 移除匹配的元素
$('li').first();                  // 获取第一个元素
$('li').last();                   // 获取最后一个元素
$('li').eq(2);                    // 获取索引为 2 的元素
$('li').slice(1, 4);              // 获取索引 1-3 的元素

// 查找元素
$('div').has('p');                // 包含 p 的 div
$('div').is('.active');           // 检查是否匹配

9. 集合操作

javascript
// 获取元素数量
$('li').length;                   // 或 $('li').size()

// 获取索引
$('li').index();                  // 当前元素在集合中的索引
$('li').index($('.active'));      // 指定元素的索引

// 转换为数组
const texts = $('li').map(function() {
  return $(this).text();
}).get();                         // 转换为普通数组

// 遍历元素
$('li').each(function(i, elem) {
  console.log(i, $(this).text());
});

// 获取 DOM 元素
const elem = $('div')[0];         // 获取第一个原生 DOM 元素
const elem = $('div').get(0);     // 同上
const elems = $('div').get();     // 获取所有原生 DOM 元素

10. 实用示例

javascript
// 提取文章标题和链接
const articles = [];
$('.article').each(function() {
  articles.push({
    title: $(this).find('h2').text(),
    link: $(this).find('a').attr('href'),
    summary: $(this).find('p').text().trim()
  });
});

// 修改表格数据
$('table tr').each(function() {
  const $row = $(this);
  const price = parseFloat($row.find('.price').text());
  if (price > 100) {
    $row.addClass('highlight');
  }
});

// 生成新的 HTML
const $container = cheerio.load('<div class="container"></div>');
data.items.forEach(item => {
  $container('.container').append(`
    <div class="item">
      <h3>${item.title}</h3>
      <p>${item.description}</p>
    </div>
  `);
});