Выберите дочерние элементы во время удаления из сети с помощью pupeeteer и nodejs

Question

Я пытаюсь очистить страницу, используя nodejs и puppeeter, вот пример содержимого страницы, которое я хочу удалить:

<article>
   <h3 class="item-title">Item 1 </h3>
   <img src="" alt="" alt="picture for this item" class="item-image">
   <a href="link-to-the-page" class="view-more">View more</a>
</article>

<article>
  <h3 class="item-title">Item 2 </h3>
  <img src="path-to-the-image" alt="" alt="picture for this item" class="item-image">
  <a href="link-to-the-page" class="view-more">View more</a>
</article>

<article>
  <h3 class="item-title">Item 2 </h3>
  <img src="path-to-the-image" alt="" alt="picture for this item" class="item-image">
  <a href="link-to-the-page" class="view-more">View more</a>
</article>

Как вы можете видеть, есть много элементов, завернутых в article тег, я хочу получить список статей и соответствующие им заголовок, ссылку на изображение и ссылку на полную страницу . Вот код, который я использую:

var puppeeteer = require('puppeeteer');
var browser = await puppeeteer.launch();
var page = await browser.newPage();
await page.goto('link-to-the=page');
var articles = await page.evaluate(()=>{
     var articles = new Array();
     document.querySelectorAll("article").forEach(elt=> { articles.push(elt); });
     return articles;
});

//Here, for each elements in articles array, i try to get : the image link, the title, and the fullpage link.

var result = new Array();
articles.forEach(elt=>{
    var article = {};
    var item_title= elt.getElementsByClassName("item-title")[0];
    var fullpage_link = elt.getElementsByClassName("view-more")[0];
    var image_path = elt.getElementsByClassName("item-image")[0];

    article.title = item_title;
    article.link = fullpage_link;
    article.image = image_path;
    result.push(article);
});

return result;

Но когда я запускаю этот код, я получаю ошибку:

(узел: 3960) UnhandledPromiseRejectionWarning: TypeError: elt .getElementsByClassName не является функцией

Другая ошибка состоит в том, что массив статей содержит следующее:

[ {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {} ]

После выполнения кода.

Может кто-нибудь помочь, пожалуйста? Заранее спасибо.

Answer 1

Просто используя html в вашем вопросе (и исправив в нем пару ошибок), что-то вроде этого (используя xpath) должно работать:

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

var doc = new DOMParser().parseFromString(`<article>
   <h3 class="item-title">Item 1 </h3>
   <img src="path-to-the-image_1"  alt="picture for this item" class="item-image">
   <a href="link-to-the-page_1" class="view-more">View more</a>
</article>

<article>
  <h3 class="item-title">Item 2 </h3>
  <img src="path-to-the-image_2"  alt="picture for this item" class="item-image">
  <a href="link-to-the-page_2" class="view-more">View more</a>
</article>

<article>
  <h3 class="item-title">Item 3 </h3>
  <img src="path-to-the-image_3"  alt="picture for this item" class="item-image">
  <a href="link-to-the-page_3" class="view-more">View more</a>
</article>`
    ,'text/xml');

var xpath = require('xpath');
const articles = xpath.select("//article", doc);
var result = new Array();
articles.forEach(function(item){
  var article = {};
  title = xpath.select('./h3/text()',item);
  fpl = xpath.select('./a/@href',item);
  isrc = xpath.select('./img/@src',item);

  article.title = title[0].nodeValue;
  article.link = fpl[0].nodeValue;
  article.image = isrc[0].nodeValue;

  result.push(article);
});
console.log(result);

Вывод:

[ { title: 'Item 1 ',
    link: 'link-to-the-page_1',
    image: 'path-to-the-image_1' },

  { title: 'Item 2 ',
    link: 'link-to-the-page_2',
    image: 'path-to-the-image_2' },

  { title: 'Item 3 ',
    link: 'link-to-the-page_3',
    image: 'path-to-the-image_3' } ]