使用JavaScript提取網頁中的表格 行列數據 批量提取

場景

有時候上網查閱資料，需要網頁中表格內、指定行列的數據。
(本例操作的表格地址：mime類型)
如果表格小(操作的 數據量小)，可以手動複製粘貼。
但如果要操作的表格很大，那麼可以使用程序自動執行遍歷表格的操作，並提取數據。

看懂以下教程需要會：

• JavaScript簡單語法；
• 瀏覽器DevTools(即F12快捷鍵呼出的界面)；

Code

• 選中表格元素
  F12調出DevTools，切換到控制檯Console
Ctrl+Shift+C，鼠標點擊網頁中的表格。
  之後在控制檯輸入$0，可以打印出最近一次在頁面中選中的元素。
  一定要選中表格。再執行以下操作。

• 執行代碼(遍歷元素)

var tbody = $0;             // 獲取剛纔鼠標點擊選中的表格
var trArr = tbody.children;       // 表格的所有子節點
for (var i = 0; i < tbody.childElementCount; i++) {
    var tr = trArr[i];  // 第i+1行
    var tdArr = tr.children;    // 獲取本行的單元格列表
    var a = tdArr[0].innerText;    // 第一列(擴展名)
    var b = tdArr[1].innerText;    // 第二列
    var c = tdArr[2].innerText;    // 第三列
    console.log("行數：%d  %s  %s  %s", i+1, a, b, c);
}

控制檯執行結果如下：

當然以上代碼只是數據提取測試。
打印出結果後，可以從控制檯複製結果數據(當然如果需要複製數據的話，需要調整一下輸出格式。不要每行都輸出一次，這樣不好複製)。

var result = "";
var tbody = $0;             // 獲取剛纔鼠標點擊選中的表格
var trArr = tbody.children;       // 表格的所有子節點
for (var i = 0; i < tbody.childElementCount; i++) {
    var tr = trArr[i];  // 第i+1行
    var tdArr = tr.children;    // 獲取本行的單元格列表
    var a = tdArr[0].innerText;    // 第一列(擴展名)
    var b = tdArr[1].innerText;    // 第二列
    var c = tdArr[2].innerText;    // 第三列
    result += `${a}  ${b} ${c}\n`;
}
console.log(result);	// 一次性打印提取到的數據

查看DOM元素對應的JavaScript的類型

首先：DOM元素對象也屬於JavaScript對象。
使用Object.prototype.toString.call(變量名)可以獲取變量的類型。

tbody    // 獲取到的表格的DOM元素
Object.prototype.toString.call(tbody);    // 表格DOM元素的JS類型


tbody.children[0]    // 行的DOM元素
Object.prototype.toString.call(tbody.children[0]);    // 行的DOM元素的JS類型


tbody.children[0].children[0]    // 單元格
Object.prototype.toString.call(tbody.children[0].children[0])    // 單元格的JS類型


Object.prototype.toString.call(tbody.children)
Object.prototype.toString.call(tbody.children[0].children)

執行結果如下：

可以看到：

DOM元素標籤	JavaScript對象類型
tbody	HTMLTableSectionElement
tr	HTMLTableRowElement
td	HTMLTableCellElement
多個tr或多個td	HTMLCollection