场景
有时候上网查阅资料,需要网页中表格内、指定行列的数据。
(本例操作的表格地址: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 |