Cheerio DOM操作深度指南：轻松玩转HTML元素操作

一、基础DOM操作

1. 元素选择器

Cheerio支持多种选择器语法：

基本选择器

javascript 复制代码

// 选择所有div元素
$('div')

// 选择ID为content的元素
$('#content')

// 选择class为highlight的元素
$('.highlight')

属性选择器

javascript 复制代码

// 选择所有带有href属性的a标签
$('a[href]')

// 选择href为特定值的a标签
$('a[href="https://example.com"]')

组合选择器

javascript 复制代码

// 选择div下的所有p元素
$('div p')

// 选择div或span元素
$('div, span')

// 选择第一个p元素
$('p:first')

2. 属性操作

javascript 复制代码

// 获取属性
const href = $('a').attr('href');

// 设置属性
$('a').attr('href', 'https://new-url.com');

// 删除属性
$('a').removeAttr('href');

二、元素遍历

1. 基础遍历方法

javascript 复制代码

// 遍历所有元素
$('div').each((index, element) => {
    console.log($(element).text());
});

// 获取第一个元素
const first = $('div').first();

// 获取最后一个元素
const last = $('div').last();

2. 选择器遍历

javascript 复制代码

// 获取父元素
const parent = $('div').parent();

// 获取子元素
const children = $('div').children();

// 获取兄弟元素
const siblings = $('div').siblings();

三、元素创建和修改

1. 创建元素

javascript 复制代码

// 创建单个元素
const newDiv = $('<div>');
const newDivWithClass = $('<div class="highlight">');

// 创建复杂结构
const complexElement = $('<div class="container"><h1>Title</h1><p>Content</p></div>');

2. 修改元素

javascript 复制代码

// 添加内容
$('div').append('<p>New content</p>');
$('div').prepend('<p>First content</p>');

// 替换内容
$('div').html('<p>Updated content</p>');

// 添加文本
$('div').text('New text content');

四、高级DOM操作

1. 链式操作

javascript 复制代码

// 链式调用
$('div')
    .addClass('highlight')
    .append('<p>New content</p>')
    .attr('data-id', '123');

五、实战案例：复杂DOM操作

1. 表格数据提取

javascript 复制代码

const tableData = [];
$('table tr').each((index, row) => {
    const rowData = [];
    $(row).find('td').each((tdIndex, cell) => {
        rowData.push($(cell).text());
    });
    tableData.push(rowData);
});

2. 动态内容生成

javascript 复制代码

const data = [
    { title: 'Item 1', description: 'Description 1' },
    { title: 'Item 2', description: 'Description 2' }
];

const $list = $('<ul>');
data.forEach(item => {
    const $item = $('<li>')
        .append(`<h3>${item.title}</h3>`)
        .append(`<p>${item.description}</p>`);
    $list.append($item);
});

结语

Cheerio的DOM操作能力强大而灵活，更加多的用法请参考官网

如果你喜欢本教程，记得点赞+收藏！关注我获取更多JavaScript开发干货。