使用.querySelector方法时出现“is not a function”错误求助

原因 #

你使用的xmldom库基础DOMParser生成的文档对象未实现querySelector/querySelectorAll这类DOM选择器API，调用时自然会抛出类型错误。

方案1：改用更适合爬虫的cheerio库 #

cheerio专为Node.js环境设计，语法和jQuery高度一致，处理HTML解析与选择更高效，操作步骤如下：

1. 安装依赖

npm install cheerio

2. 修改代码：

const cheerio = require('cheerio');

fetch('http://books.toscrape.com/index.html')
  .then(response => response.text())
  .then(html => {
    const $ = cheerio.load(html);
    const elem = $('.thumbnail').html(); // 等价于原生innerHTML
    console.log(elem);
  })
  .catch(error => {
    console.error('error:', error);
  });

方案2：为xmldom补充选择器支持 #

如果坚持使用xmldom，可通过css-select包扩展选择器功能：

1. 安装依赖

npm install xmldom css-select

2. 修改代码，手动实现选择逻辑：

const { DOMParser } = require('xmldom');
const select = require('css-select');

fetch('http://books.toscrape.com/index.html')
  .then(response => response.text())
  .then(html => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    // 用css-select的selectOne替代querySelector
    const elem = select.selectOne('.thumbnail', doc);
    console.log(elem.innerHTML);
  })
  .catch(error => {
    console.error('error:', error);
  });

方案3：升级到新版xmldom #

xmldom的官方新版本包@xmldom/xmldom已内置querySelector支持：

1. 替换依赖包

npm uninstall xmldom
npm install @xmldom/xmldom

2. 调整代码引入路径：

const { DOMParser } = require('@xmldom/xmldom');

fetch('http://books.toscrape.com/index.html')
  .then(response => response.text())
  .then(html => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const elem = doc.querySelector('.thumbnail').innerHTML;
    console.log(elem);
  })
  .catch(error => {
    console.error('error:', error);
  });

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