Web 刮入 JavaScript

Question

我正在嘗試在 JavaScript 中抓取一個網頁，如下所示：

顯示的代碼是一個更大循環的一部分，該循環遍歷每個 repo 並抓取它的內容。 我已經確認我能夠捕獲頁面上每個 repo 項目的第一個元素（因此“33-js-concepts”的 javascript、“playground”的反應、“react-google-static”的反應"等）並且可以刮掉第一個 repo 中的所有項目（因此 javascript、concepts、nodejs、react、angular 等），但在后續循環中不斷出現此錯誤。 這是我的代碼：

r.topic = []; // topics used in the repo:
var topics = $('.topics-row-container > a', parent);
    if(topics && topics.length > 0) {
      for (var i in topics) {
        r.topic.push(topics[i].children[0].data.replace(/^\s+|\s+$/g, ''));
        
    }
    console.log(r.topic);

第一個循環產生預期的結果，console.log(r.topic) 打印：

[
  'javascript',
  'concepts',
  'nodejs',
  'react',
  'angular',
  'programming',
  'javascript-programming'
]

但隨后的循環會產生以下錯誤：

r.topic.push(topics[i].children[0].data.replace(/^\s+|\s+$/g, ''));
                                       ^
TypeError: Cannot read property '0' of undefined

我是 javascript 的新手，所以我想我遺漏了一些明顯的東西，但我不明白為什么孩子們會拋出這個錯誤。 我什至試着讓它在每個循環中讓孩子們增加一，但我仍然看到同樣的錯誤。

我真的很感激任何幫助！

更新：打印到控制台的主題如下所示：

children: [ [Node] ],
    parent: Node {
      type: 'tag',
      name: 'div',
      namespace: 'http://www.w3.org/1999/xhtml',
      attribs: [Object: null prototype],
      'x-attribsNamespace': [Object: null prototype],
      'x-attribsPrefix': [Object: null prototype],
      children: [Array],
      parent: [Node],
      prev: [Node],
      next: [Node]
    },
    prev: Node {
      type: 'text',
      data: '\n          ',
      parent: [Node],
      prev: [Node],
      next: [Circular *7]
    },
    next: Node {
      type: 'text',
      data: '\n      ',
      parent: [Node],
      prev: [Circular *7],
      next: null
    }
  },
  options: { xml: false, decodeEntities: true },
  _root: <ref *8> initialize {
    '0': Node {
      type: 'root',
      name: 'root',
      parent: null,
      prev: null,
      next: null,
      children: [Array],
      'x-mode': 'no-quirks'
    },

Answer 1

如果您現在只需要該信息，並且這不是常規執行此操作的較大站點的一部分，您可以：

if (topics[i] && topics[i].children && 
    topics[i].children[0] && topics[i].children[0].data)
    r.topic.push(topics[i].children[0].data.replace(/^\s+|\s+$/g, ''));

它沒有找到一些元素。 如果您想真正尋找正在發生的事情以使其適用於所有情況，您可以：

r.topic = []; // topics used in the repo:
var topics = $('.topics-row-container > a', parent);
try {
    if(topics && topics.length > 0) {
        for (var i in topics) {
            r.topic.push(topics[i].children[0].data.replace(/^\s+|\s+$/g, ''));
        }
        console.log(r.topic);
    }
} catch(error) {
    console.log(error, topics);
}  

然后，當它失敗時，您可以檢查主題結構並查看失敗的位置，以便您可以增強循環以處理該特定情況。 如果您可以在成功和失敗時提供正在運行的站點或主題 var 的內容，我可以做一個工作示例。

如果您決定與我們分享此信息，請不要在問題上發布。 使用pastebin.com什么的。

Answer 2

這$('.topics-row-container > a', parent); most like 不會返回所有這些元素的數組，當您執行for/in時，這會導致 object 的循環而不是數組。

您需要一種方法來返回所有這些'.topics-row-container > a'元素的數組。

你可以使用document.querySelectorAll() ，

所以，從技術上講，這條線：

var topics = $('.topics-row-container > a', parent);

可能看起來像：

var topics = parent.querySelectorAll('.topics-row-container > a');

Answer 3

基本示例，獲取標記為 javascript 的存儲庫的javascript 。

 fetch('https://api.github.com/search/repositories?q=javascript').then(v => v.json()).then((v) => { console.log(v) } )

Answer 4

我缺少代碼和指向 Github 頁面的鏈接來重現錯誤。 僅通過查看錯誤消息，似乎.children undefined （因為該節點沒有子節點？）。

跳過這些節點怎么樣？

r.topic = []; // topics used in the repo:
const topics = $('.topics-row-container > a', parent);
if(topics && topics.length > 0) {
  for (const topic of topics) {
    if(!topic.children) {
      // you could `console.log(topic)` here to debug why `.children` is undefined
      continue
    }
    const [firstChild] = topic.children
    r.topic.push(firstChild.data.replace(/^\s+|\s+$/g, ''));
  }
  console.log(r.topic);
}