2023-01-11

前情提要? 上一篇實作方法利用了三個迴圈，取得標題，將標題的資料利用索引(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 在這個標準規範下，我們理論上可以信任瀏覽器會解析這些元素來使用