使用JavaScript提取网页中的表格 行列数据 批量提取 |
您所在的位置：网站首页 › 获取table某一列的数据的方法 › 使用JavaScript提取网页中的表格 行列数据 批量提取 |
使用JavaScript提取网页中的表格 行列数据 批量提取
|
文章目录
场景Code查看DOM元素对应的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 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)执行结果如下：
|
可以看到：【本文地址】
今日新闻 |
推荐新闻 |