如何用NodeJS提取网站DOM与ShadowDOM的HTML结构（仅保留标签属性）

核心思路 #

用Node.js请求目标网页，解析HTML后遍历所有元素，移除所有文本内容，保留标签嵌套结构和类、ID等属性。推荐用cheerio做HTML解析（语法和jQuery一致，上手快），axios做HTTP请求；如果是动态渲染的SPA页面，改用puppeteer获取完整渲染后的HTML。

实现步骤 #

1. 安装依赖

针对静态页面：

npm install cheerio axios

针对动态SPA页面（额外安装）：

npm install puppeteer

2. 静态页面处理代码

const axios = require('axios');
const cheerio = require('cheerio');

// 目标网站列表
const targetUrls = [
  'https://example.com',
  'https://your-target-site.com'
];

// 单个页面处理函数
async function stripHtmlContent(url) {
  try {
    // 获取网页原始HTML
    const { data: rawHtml } = await axios.get(url);
    const $ = cheerio.load(rawHtml);

    // 遍历所有元素，移除文本节点，保留标签和属性
    $('*').each((_, element) => {
      $(element).contents()
        .filter((_, node) => node.type === 'text')
        .remove();
    });

    // 输出处理后的结构（可按需用prettier格式化缩进）
    const strippedHtml = $.html();
    console.log(`===== ${url} 处理结果 =====\n`, strippedHtml);
    return strippedHtml;
  } catch (err) {
    console.error(`处理${url}失败：`, err.message);
    return null;
  }
}

// 批量处理所有网站
async function batchProcess() {
  for (const url of targetUrls) {
    await stripHtmlContent(url);
  }
}

// 执行
batchProcess();

3. 动态SPA页面处理代码

如果目标网站是React/Vue等框架渲染的动态页面，axios只能拿到空壳HTML，需要用puppeteer模拟浏览器获取完整渲染后的内容：

const puppeteer = require('puppeteer');
const cheerio = require('cheerio');

async function stripDynamicHtml(url) {
  // 启动无头浏览器
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  
  // 等待页面加载完成（networkidle2表示仅剩下2个以下网络请求）
  await page.goto(url, { waitUntil: 'networkidle2' });
  const renderedHtml = await page.content();
  
  await browser.close();

  // 后续处理和静态页面一致
  const $ = cheerio.load(renderedHtml);
  $('*').each((_, element) => {
    $(element).contents()
      .filter((_, node) => node.type === 'text')
      .remove();
  });

  return $.html();
}

注意事项 #

• CORS限制：Node.js环境下请求网页不受浏览器CORS规则限制，无需额外配置；
• 格式化缩进：如果需要像示例那样的美观缩进，可以安装prettier，用prettier.format(strippedHtml, { parser: 'html' })处理；
• 反爬机制：部分网站会拦截非浏览器请求，可给axios添加请求头模拟浏览器：

  await axios.get(url, {
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
    }
  });
  

内容的提问来源于stack exchange，提问作者Brad