C# AngleSharp中QuerySelectorAll().GetAttribute()失效，如何批量解析data-src？

你之前的问题核心在于：QuerySelectorAll()返回的是NodeList元素集合，并非单个DOM节点，直接在集合上调用GetAttribute()完全无效，必须遍历集合内的每个元素单独提取属性。

原生JavaScript实现（浏览器环境） #

// 确保DOM加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', () => {
  // 先定位目标容器
  const sliderContainer = document.querySelector('.product-slider-data');
  if (!sliderContainer) {
    console.error('未找到.product-slider-data容器');
    return;
  }
  
  // 提取所有div的data-src并过滤空值
  const srcLinks = Array.from(sliderContainer.querySelectorAll('div'))
    .map(div => div.getAttribute('data-src'))
    .filter(src => src);
  
  console.log('提取到的链接:', srcLinks);
});

Node.js静态解析（Cheerio） #

如果是在Node.js中处理抓取到的静态HTML，用Cheerio的写法：

const cheerio = require('cheerio');

// 假设html是你抓取到的网页内容
const $ = cheerio.load(html);
const srcLinks = [];

$('.product-slider-data div').each((_, el) => {
  const src = $(el).attr('data-src');
  src && srcLinks.push(src);
});

console.log(srcLinks);

动态渲染页面处理（Puppeteer） #

如果页面内容是通过JavaScript动态加载的，静态解析无法获取到数据，需要用无头浏览器抓取渲染后的DOM：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('你的目标页面URL');
  
  // 等待目标容器加载完成
  await page.waitForSelector('.product-slider-data');
  
  const srcLinks = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.product-slider-data div'))
      .map(div => div.getAttribute('data-src'))
      .filter(Boolean);
  });
  
  console.log(srcLinks);
  await browser.close();
})();

关键注意点 #

• 永远不要直接在QuerySelectorAll()返回的集合上调用属性方法，必须遍历每个元素
• 浏览器环境下务必确保DOM已加载完成，否则会出现元素找不到的情况
• 动态生成的内容只能通过无头浏览器或DOM变化监听来获取

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