1 月 2023

前情提要? 上一篇實作方法利用了三個迴圈，取得標題，將標題的資料利用索引(index) 抓取表格的內容，

程式碼如下：

let headData = Array.from(document.querySelectorAll('thead > tr > th')).map(n=>n.innerText)
console.log('headData', headData )

let tableObject = []
for(let trNode of document.querySelectorAll('tbody > tr') ){
  let data = {};
  Array.from(trNode.querySelectorAll('td')).forEach((n , index)=>{
    data[ headData[index] ] = n.innerText
  })
  tableObject.push(data)
}
console.log( 'tableObject ',tableObject )

其中內容可以看到，第二段的地方，所跑的迴圈是針對 td 來做處理，headData 的部分其實也是針對 tr 下的 欄位去做處理，以前針對 XHTML 有稍微看一下規範，在標準的 HTML 結構下 TABLE 的子節點必須是 caption,colgroup,thead,tbody,tr 幾種節點，tr 這個節點下也只能有 th 跟 td 在這個標準規範下，我們理論上可以信任瀏覽器會解析這些元素來使用

自從工作開始分前後端分離之後，JavaScript 的東西就比較少去鑽研。但近期工作又開始大量使用到 JavaScript ，開發的途中會需要重複使用一些迴圈函數。還記得為了因應瀏覽器的變化以及複雜程度， jQuery 的出現就讓開發者省去不少事情，DOM 的迴圈 each 可以直接從選擇器的 $(dom).each 來使用，演變到現在瀏覽器大多直接使用 querySelectorAll 的方法來跑 forEach， ECMAScript 的演化大大降低了對 jQuery 的依賴程度，開發前端開始探究起 JavaScript 的深度，進而演變許多框架，想要學好JavaScript MDN 就是個很好用的工具。

寫程式不需要一步到位，逐步漸進的達成目的，有機會再去把程式碼精簡調校，能夠理解其原理才會是最好的解法

這次就用個簡單的範例，當遇到表格的時候，要怎麼轉成 一般的 Plain Object ，這個例子也是我使用 Greasemonkey 腳本開發的時候，要將 DOM 的內容轉換成可以快速重複利用資料的做法，當使用腳本的時候，需要分解的網頁會是結果，要轉換成可利用的資料還需要經過一番抓取變換，熟悉操作之後就可以很容易地將資料轉換成畫面。

首先來一個範例：