.querySelector method returning "is not a function" error

Question

Been getting back into programming after a pretty long while, I decided I would play around with http requests in javascript to build a web scraper later, I wrote this little guy to practice a bit:

      var DOMParser = require('xmldom').DOMParser;
    
    fetch('http://books.toscrape.com/index.html')
      .then(response => {
        return 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)
       })

This returns the following error:

    error: TypeError: doc.querySelector is not a function
    at /home/petal/Desktop/scrapetest.js:11:22
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

At least this github.com/xmldom/xmldom , "Since version 0.7.0 this package is published to npm as @xmldom/xmldom and no longer as xmldom, because we are no longer able to publish xmldom". But xmldom isn't complete dom implementation, so if you need it for scraping, consider cheerio or jsdom — Estus Flask
– Estus Flask, Commented May 4 at 10:16

jexroid · Accepted Answer · 2025-05-04 10:12:30Z

It's because xmldom doesn't support all DOM APIs like `.querySelector', and it's not declared or may be dropped in newer versions. You have two options:

using a better library with DOM interaction like jsdom (Recommended)
getElementByClass method from DOMParser()

1. JSDOM

jsdom is much more stable than xmldom and it requires Nodejs with version 18 or higher

1. first step:

Install JSDOM with your favorite package manager

npm install jsdom

2. second step:

import it within the bracket and make a new instance like below:

const { JSDOM } = require('jsdom');

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

In this code, you are passing all the text from return response.text() to JSDOM, and you get all the DOM using dom.window.document Now you can utilize any DOM API, such as getElementById or querySelector, to extract your HTML element.

2. Staying with xmldom

you just need to use getElementByClass instead of querySelector:

var DOMParser = require('xmldom').DOMParser;

fetch('http://books.toscrape.com/index.html')
  .then((response) => {
    return response.text();
  })
  .then((html) => {
    const parser = new DOMParser();

    const doc = parser.parseFromString(html, 'text/html');
    const elem = doc.getElementsByClassName('thumbnail')[0].innerHTML;

    console.log(elem);
  })
  .catch((error) => {
    console.error('error:', error);
  });

Collectives™ on Stack Overflow

.querySelector method returning "is not a function" error

1 Answer 1

1. JSDOM

2. Staying with xmldom

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. JSDOM

2. Staying with xmldom

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related