📌  相关文章
📜  Cheerio 加载 - Javascript (1)

📅  最后修改于: 2023-12-03 15:14:08.254000             🧑  作者: Mango

Cheerio 加载 - Javascript

Cheerio 是一个基于 JQuery 核心实现的快速、灵活、与 HTML/XML DOM 交互的工具，适合在 Node.js 环境下爬取、处理数据。本文将对 Cheerio 的使用进行介绍。

安装 Cheerio

在 Node.js 中使用 Cheerio 首先需要安装它，使用以下命令进行安装：

npm install cheerio
加载 HTML/XML

加载一个外部 HTML/XML 文档可以使用 cheerio.load() 方法，该方法可以接收一个字符串类型的 HTML/XML，也可以是一个 buffer，例如：

const cheerio = require('cheerio');
const html = '<html><body><h1>Hello World!</h1></body></html>';
const $ = cheerio.load(html);

这样就可以使用 $ 对象来操作 HTML/XML 文件了。

选择器

Cheerio 支持 JQuery 的大部分选择器，包括：

  • ID 选择器：#id
  • class 选择器：.class
  • 标签选择器：tag
  • 属性选择器：[attribute], [attribute=value]
  • 组合选择器：selector1, selector2
  • 后代选择器：selector1 selector2
  • 子元素选择器：selector1 > selector2
  • 兄弟元素选择器：selector1 ~ selector2

例如：

const cheerio = require('cheerio');
const html = '<html><body><h1>Hello World!</h1><ul><li>Item 1</li><li>Item 2</li></ul></body></html>';
const $ = cheerio.load(html);

// 获取 h1 元素的文本内容
const h1Text = $('h1').text();
console.log(h1Text); // Hello World!

// 获取 ul 下的所有 li 元素文本内容
const liTexts = $('ul li').map((i, el) => $(el).text()).get();
console.log(liTexts); // ['Item 1', 'Item 2']
属性操作

Cheerio 同样支持 JQuery 的属性操作方法，包括：

  • .attr(name)
  • .attr(name, value)
  • .removeAttr(name)

例如：

const cheerio = require('cheerio');
const html = '<html><body><a href="http://example.com">Example</a></body></html>';
const $ = cheerio.load(html);

// 获取 a 元素的 href 属性值
const href = $('a').attr('href');
console.log(href); // http://example.com

// 设置 a 元素的 href 属性值
$('a').attr('href', 'http://example.org');

// 移除 a 元素的 href 属性
$('a').removeAttr('href');
DOM 操作

Cheerio 提供了一些 DOM 操作方法，包括：

  • .html()
  • .html(htmlString)
  • .text()
  • .text(textString)
  • .prepend(content[, content])
  • .append(content[, content])
  • .before(content[, content])
  • .after(content[, content])
  • .remove()
  • .empty()

例如：

const cheerio = require('cheerio');
const html = '<ul><li>Item 1</li><li>Item 2</li></ul>';
const $ = cheerio.load(html);

// 获取 ul 元素的 HTML 内容
const ulHtml = $('ul').html();
console.log(ulHtml); // <li>Item 1</li><li>Item 2</li>

// 修改 ul 元素的 HTML 内容
$('ul').html('<li>New Item</li>');

// 获取 ul 元素的文本内容
const ulText = $('ul').text();
console.log(ulText); // Item 1Item 2New Item

// 修改 ul 元素的文本内容
$('ul').text('New Content');

// 在 ul 元素前插入新元素
$('ul').before('<h1>Hello World!</h1>');

// 在 ul 元素内部最前面插入新元素
$('ul').prepend('<li>Item 0</li>');

// 在 ul 元素内部最后面插入新元素
$('ul').append('<li>Item 3</li>');

// 在 ul 元素后面插入新元素
$('ul').after('<p>The End</p>');

// 移除 ul 元素
$('ul').remove();

// 清空 ul 元素
$('ul').empty();
总结

Cheerio 是一个强大的 HTML/XML 处理工具，能够使 Node.js 爬虫的开发更加灵活。本文介绍了 Cheerio 的安装、加载、选择器、属性操作、DOM 操作等相关内容，如果有更多的需要，还可以查阅官方文档。