使用JavaScript提取网页中的表格行列数据批量提取

梦里梦外; 2023-02-14 02:14 15阅读 0赞

### 文章目录 ###

*   *  场景
     *  Code
     *  查看DOM元素对应的JavaScript的类型

## 场景 ##

有时候上网查阅资料，需要网页中**表格**内、指定行列的数据。  
(本例操作的表格地址：[mime类型][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);
    }

控制台执行结果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]当然以上代码只是数据提取测试。  
打印出结果后，可以从控制台复制结果数据(当然如果需要复制数据的话，需要调整一下输出格式。不要每行都输出一次，这样不好复制)。

## 查看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)

执行结果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]可以看到：

<table> 
 <thead> 
  <tr> 
   <th>DOM元素标签</th> 
   <th>JavaScript对象类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tbody</td> 
   <td>HTMLTableSectionElement</td> 
  </tr> 
  <tr> 
   <td>tr</td> 
   <td>HTMLTableRowElement</td> 
  </tr> 
  <tr> 
   <td>td</td> 
   <td>HTMLTableCellElement</td> 
  </tr> 
  <tr> 
   <td>多个tr或多个td</td> 
   <td>HTMLCollection</td> 
  </tr> 
 </tbody> 
</table>

[mime]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200530235452465.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200530235007783.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3,size_16,color_FFFFFF,t_70#pic_center