Nodejs服务器端DOM操作库cheerio的使用

Nodejs服务器端DOM操作库cheerio的使用
Cheerio 是一个 Node.js 库，它提供了类似于 jQuery 的 API，用于解析和操作 HTML 文档。虽然它不支持浏览器中的 DOM 操作，但在服务器端处理 HTML 时非常有用。下面是一些 Cheerio 的基本用法示例。

安装

首先，你需要安装 cheerio 库。可以通过 npm 安装：

npm install cheerio

基本用法

1. 加载 HTML

你可以将 HTML 字符串加载到 Cheerio 中，然后使用类似 jQuery 的语法来操作它。

const cheerio = require('cheerio');

// 示例 HTML 字符串
const html = `
  <html>
    <body>
      <div class="content">
        <h1>Hello World</h1>
        <p>Welcome to Cheerio!</p>
      </div>
    </body>
  </html>
`;

// 加载 HTML
const $ = cheerio.load(html);

// 输出 HTML 结构
console.log($.html());

2. 选择元素

使用 CSS 选择器来选择和操作 HTML 元素。

// 获取 h1 标签的内容
const h1Content = $('h1').text();
console.log(h1Content); // 输出: Hello World

// 修改 p 标签的内容
$('p').text('This is a new paragraph.');
console.log($.html()); 
/*
输出:
<html>
  <body>
    <div class="content">
      <h1>Hello World</h1>
      <p>This is a new paragraph.</p>
    </div>
  </body>
</html>
*/

3. 添加或删除元素

你可以添加新的元素或删除现有的元素。

// 添加一个新的 div
$('body').append('<div class="new">New Div</div>');

// 删除第一个 p 标签
$('p').first().remove();

console.log($.html());
/*
输出:
<html>
  <body>
    <div class="content">
      <h1>Hello World</h1>
    </div>
    <div class="new">New Div</div>
  </body>
</html>
*/

4. 属性操作

你也可以获取、设置或删除元素的属性。

// 获取第一个 div 的 class 属性
const divClass = $('div').attr('class');
console.log(divClass); // 输出: content

// 设置 h1 的 class 属性
$('h1').attr('class', 'title');

console.log($.html());
/*
输出:
<html>
  <body>
    <div class="content">
      <h1 class="title">Hello World</h1>
    </div>
    <div class="new">New Div</div>
  </body>
</html>
*/

以上就是 Cheerio 的一些基本用法。通过这些操作，你可以在服务器端轻松地解析和修改 HTML 文档。

gougou168 1楼•1 个月前

Cheerio是Node.js中一个轻量级的库，用于解析和操作HTML文档，它的API设计灵感来自于jQuery，但主要用于服务器端。想象一下，如果你能在服务器上像用jQuery一样轻松地操作DOM，那该多好！Cheerio就是来实现这个梦想的。

使用Cheerio的基本步骤如下：

安装：首先你需要安装Cheerio，可以通过npm来安装，命令是npm install cheerio。
引入：在你的Node.js脚本中引入Cheerio，通常这样写：const cheerio = require('cheerio');
加载HTML：你可以加载一个字符串形式的HTML或者从文件、网络请求等获取HTML内容，然后使用cheerio.load()方法加载它，这将返回一个类似于jQuery的选择器函数。
操作DOM：现在你可以使用类似jQuery的方法来选择、修改或遍历DOM元素了。比如，如果你想找到所有的<p>标签并改变它们的内容，可以这样做：$('p').html('新的内容');
输出结果：最后，你可以通过调用.html()方法将修改后的DOM转换回HTML字符串。

Cheerio非常适合处理HTML文档的解析和操作任务，比如网页抓取、模板引擎等场景。

htzhanglong 2楼•1 个月前

Cheerio 是一个用于 Node.js 的开源库，用于解析 HTML 和 XML 文档，并允许你以类似 jQuery 的方式来操作这些文档。虽然它不能直接操作浏览器中的 DOM，但可以在服务器端或命令行环境中进行 DOM 操作。以下是如何安装和使用 Cheerio 的简要指南：

安装

首先，你需要安装 Cheerio 库。你可以通过 npm（Node 包管理器）来安装它。

npm install cheerio

基本使用

下面是一些使用 Cheerio 进行基本 DOM 操作的例子：

1. 加载 HTML 并选择元素

const cheerio = require('cheerio');

// 示例 HTML 字符串
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="content">Hello World!</div>
</body>
</html>
`;

// 使用 cheerio.load 加载 HTML
const $ = cheerio.load(html);

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

// 输出: Hello World!

2. 修改元素内容

// 修改第一个 div 的内容
$('.content').html('Updated Content!');

console.log($.html()); // 输出更新后的 HTML

3. 添加新元素

// 在 body 内添加一个新的 p 元素
$('body').append('<p>This is a new paragraph.</p>');

console.log($.html()); // 输出包含新元素的 HTML

4. 删除元素

// 删除所有的 div 元素
$('div').remove();

console.log($.html()); // 输出删除元素后的 HTML

5. 处理属性

// 获取第一个 div 的 class 属性
console.log($('div').attr('class')); // 输出: content

// 设置第一个 div 的 class 属性为 new-class
$('div').attr('class', 'new-class');

console.log($.html()); // 输出更新 class 属性后的 HTML

以上就是如何使用 Cheerio 进行基本的 DOM 操作。Cheerio 功能强大，可以满足大多数服务器端 HTML 解析和操作的需求。

songsunli 3楼•1 个月前

Cheerio用于服务器端解析和操作HTML，类似于jQuery。首先安装Cheerio：npm install cheerio。然后可以这样使用：

const cheerio = require('cheerio');

let html = `<div><p>Hello World</p></div>`;
let $ = cheerio.load(html);

$('p').text('Hello Cheerio!');
console.log($.html());

这段代码将输出修改后的HTML：<div><p>Hello Cheerio!</p></div>。通过选择器获取元素并进行修改。