CODEWITHSUNDEEP
javascriptjquery
DatsunBing
DatsunBing

Reputation: 9076

Using jQuery to manipulate a composed HTML page?

I am working on a data scraping application. The pages I want to scrape have already been collected by server-to-server requests, and are currently stored in my database. I use an axios request to retrieve them from my database, and I now want to traverse/manipulate the pages using my VueJS application.

Here's what I have so far...

import $ from 'jquery'
...
...
axios.get('/mydomain/fetch_page/1')
    .then(function (response) {
        console.log(response.data.body); // log point #1
        let $page = $(response.data.body);
        // let $heading = $page('h2');
        console.log($page); // log point #2
    })

At log point #1 the page looks fine. It includes the entire page: DOCTYPE, html, head, body, etc

At log point #2, it is an object where each property represents a DOM node, including text nodes.

If I un-comment the line that queries the $page for a $heading, I get an error telling me that $page is not a function. What am I doing wrong?

Upvotes: 0

Views: 45

Answers (1)

Barmar
Barmar

Reputation: 780889

$page is a jQuery object, not a function. Just as when you're writing web applications using jQuery, you call methods on it, you don't call it as a function.

To get the h2 elements, use the .find() method:

let $heading = $page.find("h2");

Upvotes: 1

Related Questions