如何使用 javascript 遍历 ul 中的 li

Question

我想遍历 ul> 中的每个 li>，然后将它们添加到一个数组中。我应该如何为每个 li 创建一个 for 循环 return 并将它们放入数组中。让 li 循环是我卡住的地方。

var Nightmare = require('nightmare');
var nightmare = Nightmare({ show: false })

nightmare
  .goto('https://en.wikipedia.org/wiki/Red_Hat_Enterprise_Linux')

  .wait(500)
  .evaluate(function () {
    var ht = document.querySelector('#toc > ul > li.toclevel-1.tocsection-5 > ul 
    ').innerText;
    return ht;
  })
  .end()
  .then(function (result) {
    console.log(result)
  })
  .catch(function (error) {
    console.error('Search failed:', error);
  });

输出：

PS C:\scrapping> node ..js
5.1     RHEL 2.1
5.2     RHEL 3
5.3     RHEL 4
5.4     RHEL 5
5.5     RHEL 6
5.6     RHEL 7

PS C:\scrapping>

Answer 1

您可以通过调整原始函数以使用 children 属性而不是 innerText 属性来获得所有 <li> 的数组.

例如：

function () {
  var ht = document.querySelector('#toc > ul > li.toclevel-1.tocsection-5 > ul
  ').children;
  return ht;
}

这将 return 一个包含 <ul> 的所有子元素的数组。

Answer 2

问题是，当您期望 then() 中的结果时，下面的 nightmare.ipc 被调用，它会尝试 stringify/destringify 将其发送到您的应用程序。 HTMLElements（由 document.querySelectorAll() 返回）可能无法进行字符串化，此类错误可以在 browserWindow

的开发人员控制台中看到

您可以轻松做到这一点：

const Nightmare = require('nightmare');
const nightmare = Nightmare({
  show: true,
  openDevTools: true,
});

nightmare
  .goto('https://en.wikipedia.org/wiki/Red_Hat_Enterprise_Linux')
  .evaluate(function(selector) {
    var links = document.querySelectorAll(selector);
    var passed = [];
    for(var ii=0; ii<links.length; ii++) {
      passed.push(links[ii].textContent);
    }
    return passed;
  }, '#toc > ul > li.toclevel-1.tocsection-5 > ul > li')
  .then(function(result) {
    console.log(result); // Outputs length.
  })
  .catch(function(error) {
    console.error('Failed', error);
  });

  //Output
  [ '5.1 RHEL 2.1',
  '5.2 RHEL 3',
  '5.3 RHEL 4',
  '5.4 RHEL 5',
  '5.5 RHEL 6',
  '5.6 RHEL 7' ]

如何使用 javascript 遍历 ul 中的 li

How to loop over li in ul using javascript

javascript

web-deployment-project

web-scraping

nightmare