Cheerio项目DOM遍历与元素筛选完全指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00674/article/details/148360216

Cheerio项目DOM遍历与元素筛选完全指南

cheerio The fast, flexible, and elegant library for parsing and manipulating HTML and XML. 项目地址: https://gitcode.com/gh_mirrors/ch/cheerio

前言

在现代Web开发中，DOM操作是不可或缺的核心技能。Cheerio作为一款轻量级的服务器端DOM操作库，为Node.js环境提供了类似jQuery的API，使得HTML文档的解析和操作变得异常简单。本文将深入讲解Cheerio中DOM遍历和元素筛选的各种方法，帮助开发者高效处理HTML文档。

基本概念

在开始之前，我们需要明确几个关键概念：

DOM树：HTML文档被解析后形成的树状结构
节点(Node)：DOM树中的基本单位，可以是元素、文本或注释
选择器(Selector)：用于定位DOM元素的表达式
遍历(Traversing)：在DOM树中移动并选择特定节点
筛选(Filtering)：从已选择的节点集合中进一步缩小范围

向下遍历DOM树

向下遍历是指从父元素向子元素方向移动，这是最常见的DOM操作方向。

find方法

find方法是最通用的向下查找方法，它会在当前选择元素的所有后代中查找匹配选择器的元素。

const $ = cheerio.load('<div><p><span>Hello</span></p></div>');
const span = $('div').find('span'); // 找到<div>下的<span>

特点：

深度优先搜索
返回所有匹配的后代元素
支持复杂CSS选择器

children方法

children方法只查找直接子元素，不会深入查找后代元素。

const $ = cheerio.load('<ul><li>Item 1</li><li>Item 2</li></ul>');
const items = $('ul').children('li'); // 只获取<ul>的直接<li>子元素

适用场景：

只需要处理直接子元素时
层级结构明确，避免意外匹配深层元素

contents方法

contents方法返回所有子节点，包括文本节点和注释节点，这是它与children的主要区别。

const $ = cheerio.load('<div>Text<!-- Comment --><p>Para</p></div>');
const nodes = $('div').contents(); // 包含文本节点、注释节点和<p>元素

典型用途：

需要处理文本内容时
解析包含注释的特殊文档结构

向上遍历DOM树

向上遍历是指从子元素向祖先元素方向移动。

parent方法

parent方法获取直接父元素，是最简单的向上遍历方法。

const $ = cheerio.load('<div><p>Hello</p></div>');
const div = $('p').parent(); // 获取<p>的父元素<div>

parents与parentsUntil方法

parents方法获取所有祖先元素，直到文档根元素。

const $ = cheerio.load('<html><body><div><p>Text</p></div></body></html>');
const ancestors = $('p').parents(); // 返回div、body、html元素

parentsUntil方法获取祖先元素，直到(但不包括)匹配选择器的元素。

const ancestorsUntilBody = $('p').parentsUntil('body'); // 只返回div元素

closest方法

closest方法查找最近的匹配选择器的祖先元素。

const $ = cheerio.load('<div class="container"><div><p>Text</p></div></div>');
const container = $('p').closest('.container'); // 找到最近的.container元素

应用场景：

查找最近的特定类型父容器
组件化开发中定位组件根元素

同级遍历

同级遍历是指在DOM树的同一层级移动，选择兄弟元素。

next与prev方法

next获取下一个兄弟元素，prev获取上一个兄弟元素。

const $ = cheerio.load('<ul><li>1</li><li>2</li><li>3</li></ul>');
const second = $('li').first().next(); // 获取第二个<li>
const first = $('li').eq(1).prev(); // 获取第一个<li>

nextAll、prevAll与siblings方法

nextAll获取所有后续兄弟元素，prevAll获取所有前面的兄弟元素，siblings获取所有兄弟元素。

const $ = cheerio.load('<ul><li>1</li><li>2</li><li>3</li></ul>');
const afterFirst = $('li').first().nextAll(); // 获取第二个和第三个<li>
const beforeLast = $('li').last().prevAll(); // 获取第一个和第二个<li>
const allSiblings = $('li').eq(1).siblings(); // 获取第一个和第三个<li>

nextUntil与prevUntil方法

nextUntil获取后续兄弟元素直到匹配选择器的元素，prevUntil获取前面兄弟元素直到匹配选择器的元素。

const $ = cheerio.load('<ul><li>1</li><li>2</li><li class="stop">3</li><li>4</li></ul>');
const between = $('li').first().nextUntil('.stop'); // 只获取第二个<li>

元素筛选

Cheerio提供了多种方法来筛选已选择的元素集合。

eq方法

eq通过索引获取集合中的特定元素。

const $ = cheerio.load('<ul><li>1</li><li>2</li><li>3</li></ul>');
const second = $('li').eq(1); // 获取第二个<li>（索引从0开始）

filter与not方法

filter保留匹配选择器的元素，not移除匹配选择器的元素。

const $ = cheerio.load('<div><p class="a">1</p><p>2</p><p class="a">3</p></div>');
const withClass = $('p').filter('.a'); // 获取class="a"的<p>元素
const withoutClass = $('p').not('.a'); // 获取没有class="a"的<p>元素

has方法

has筛选出包含特定子元素的元素。

const $ = cheerio.load('<ul><li><span>1</span></li><li>2</li></ul>');
const withSpan = $('li').has('span'); // 只获取包含<span>的<li>

first与last方法

first获取集合的第一个元素，last获取集合的最后一个元素。

const $ = cheerio.load('<ul><li>1</li><li>2</li><li>3</li></ul>');
const first = $('li').first(); // 第一个<li>
const last = $('li').last(); // 最后一个<li>

性能优化建议

优先使用选择器：大多数筛选方法都有对应的选择器语法（如:first、:last等），选择器通常性能更好
链式调用：合理组合方法链，减少中间结果
缩小范围：先选择大致范围，再精细筛选
避免过度遍历：只在必要时进行深层遍历

实际应用示例

示例1：提取表格数据

const $ = cheerio.load(html);
const tableData = [];

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

示例2：构建文档目录

const $ = cheerio.load(html);
const toc = [];

$('h2, h3').each((i, heading) => {
  const level = $(heading).prop('tagName').toLowerCase();
  toc.push({
    level,
    text: $(heading).text(),
    id: $(heading).attr('id')
  });
});