使用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