Chrome 控制台中的 Web 抓取 - 迭代 mat-tab 元素中的行

Question

免责声明：我不懂 JS，这是我工作的任务。

我被要求使用 Chrome 控制台从 Google 营销页面撤回一些数据。

我需要抓取的 HTML 代码如下所示：

The code in the console

我在创建字典的地方编写了以下代码，然后使用 document.Selector() 获取数据，但我只从一行中获取数据。

var IntegrationDetails = [{}]

IntegrationDetails[0]["Property Name"] = document.querySelector("JSPath").innerText

IntegrationDetails[0]["Advertiser"] = document.querySelector("JSPath").innerText

IntegrationDetails[0]["Tracking ID"] = document.querySelector("JSPath").innerText

IntegrationDetails[0]["Account"] = document.querySelector("JSPath").innerText

IntegrationDetails[0]["Organisation name"] = document.querySelector("JSPath").innerText

IntegrationDetails[0]["Integrations with reporting data"] = document.querySelector("JSPath").innerText

IntegrationDetails[0]["Integrations with Cost Data"] = document.querySelector("JSPath").innerText

IntegrationDetails[0]["Integrations with Remarketing Lists"] = document.querySelector("JSPath").innerText

copy(IntegrationDetails)

我不知道如何遍历 mat-tab 元素中的每一行并将每一行追加到字典中。

Answer 1

下面是我发现有效的解决方案。我还需要根据 table 的长度增加 [i]，以免覆盖数据。

var IntegrationDetails = []

for(let i=0;i < document.querySelectorAll('mat-row').length; i++) {
    IntegrationDetails.push( {
        "Property Name":  document.querySelectorAll('mat-row')[i].querySelectorAll("mat-cell")[1].innerText,
        "Advertiser": document.querySelectorAll('mat-row')[i].querySelectorAll("mat-cell")[2].innerText,
        "Tracking ID" : document.querySelectorAll('mat-row')[i].querySelectorAll("mat-cell")[3].innerText,
        "Account" : document.querySelectorAll('mat-row')[i].querySelectorAll("mat-cell")[4].innerText,
        "Organisation name" : document.querySelectorAll('mat-row')[i].querySelectorAll("mat-cell")[5].innerText,
        "Int with report data" : document.querySelectorAll('mat-row')[i].querySelectorAll("mat-cell")[6].innerText,
        "Int with Cost Data" : document.querySelectorAll('mat-row')[i].querySelectorAll("mat-cell")[7].innerText,
        "Int with Remarketing Lists" : document.querySelectorAll('mat-row')[i].querySelectorAll("mat-cell")[8].innerText
    })
}

copy(IntegrationDetails)

Chrome 控制台中的 Web 抓取 - 迭代 mat-tab 元素中的行

Web scrapping in Chrome Console- iterate over rows in mat-tab element

javascript

google-chrome

console

web-scripting

console-scraping