dimanche 3 mai 2020

How to access text content of a html element of a website(eg. google.com) using fetch api javascript

I was trying to learn Web scraping using Javascript .So I tried to do a project . I started on with a html file which has some javascript code inside script tag. Then I used fetch to load a webpage. it was https://www.google.co.in/?gfe_rd=cr&dcr=0&ei=ULHMWevSJc7HXtK1ivAJ . Then I copied the JS path of a html div element which contains some text....Here's the path "document.querySelector("#SIvCob")". when I open the website and type this "document.querySelector("#SIvCob").textContent" in console , The text gets displayed and everything works fine ! I used fetch to load the webpage's html file as text and then converted it as html and console logged the html document. now when I type "document.querySelector("#SIvCob").textContent" or "document.querySelector("#SIvCob").innerText" in console , it is showing " VM1639:1 Uncaught TypeError: Cannot read property 'textContent' of null at :1:111 ". I know that I need something more to the "document.querySelector("#SIvCob").textContent" but I don't understand how to access data from the html document which was console logged before !

fetch(site)
.then(function(responce) {
  return responce.text();
})
.then(function(html) {
  var parser = new DOMParser();
  var doc = parser.parseFromString(html, "text/html");
  console.log(doc); 
  let textcon = document.querySelector("#SIvCob").textContent ;
  console.log(textcon);
})

.catch(function(err) {
  console.log('Failed to fetch page: ', err);
})
};
getViews();



Aucun commentaire:

Enregistrer un commentaire