Как получить доступ к текстовому контенту элемента html веб-сайта (например, google.com) с помощью fetch api javascript - PullRequest
Новая
       53

Как получить доступ к текстовому контенту элемента html веб-сайта (например, google.com) с помощью fetch api javascript

0 голосов
/ 03 мая 2020

Я пытался изучить веб-скребинг, используя Javascript. Поэтому я пытался сделать проект. Я начал с файла html, в котором есть какой-то код javascript внутри тега script. Затем я использовал fetch для загрузки веб-страницы. это было https://www.youtube.com/watch?v=BxV14h0kFs0.

Я хотел получить доступ к просмотрам видео на YouTube. Затем я скопировал JS путь элемента span html, который содержит количество просмотров .... Вот путь "document.querySelector (" # count> yt-view-count-renderer> span.view-count .style-scope.yt-представление-граф-рендерер ")". когда я открываю веб-сайт и набираю этот «document.querySelector (» # count> yt-view-count-renderer> span.view-count.style-scope.yt-view-count-renderer "). textContent" в консоли, Количество просмотров отображается, и все работает отлично! Я использовал fetch , чтобы загрузить файл html веб-страницы как текст, а затем преобразовал его как html и назвал его "do c", и консоль зарегистрировала документ html. теперь, когда я набираю "do c .querySelector (" # count> yt-view-count-renderer> span.view-count.style-scope.yt-view-count-renderer "). textContent" или "document. querySelector ("# count> yt-view-count-renderer> span.view-count.style-scope.yt-view-count-renderer"). innerText "в консоли, он показывает« VM1639: 1 Uncaught TypeError: Cannot прочитать свойство 'textContent' из null в: 1: 111 ". или что-то подобное ....... На данный момент я решил проблему с CORS, используя расширение chrome, но это не моя проблема! Я не понимаю, как получить доступ к данным из документа html, который ранее был зарегистрирован в консоли! Я попробовал это для google.com, и он работал нормально, но это не работает для YouTube! Пожалуйста, помогите мне решить эту проблему и извините, если мой код не работает .......: (

<script>

const yt = 'https://www.youtube.com/watch?v=';
const video = 'AhheCe94TcA';
const url = yt + video ; 
console.log(url);


function getViews(){
fetch(url)
.then(function(responce) {
  return responce.text();
})
.then(function(html) {
  var parser = new DOMParser();

  var doc = parser.parseFromString(html, "text/html");

  console.log(doc);
  // let vtext = doc.getElementsByClassName("view-count style-scope yt-view-count-renderer")[0].textContent ;
  // let textcon = doc.querySelector("#SIvCob").textContent ;
  // console.log(textcon);
  // console.log(vtext);
let view_count = doc.getElementsByTagName('span')[22].outerText ;
console.log(view_count);


})

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




};

getViews();




  </script>

просто игнорируйте эти закомментированные строки!

...