获取 div 元素的子元素

Question

我使用表格元素创建了一个棋盘，我想获取所有的 div，以便我可以在控制台中看到它打印

因为有 64 个正方形，我想在控制台中看到它们全部列出，以便我可以从中创建一个数组，但我得到的是

HTMLCollection [div#id, id: div#id]

。我怎样才能得到它来控制其中的所有元素？

let div = document.getElementsByClassName('board')
div[0].setAttribute('id', 'divid')
let divId = document.getElementById('divid')

var table = document.createElement("div");
table.id = 'id'
let id=0;
for (var i = 1; i < 9; i++) {
  var tr = document.createElement('tr');
  for (var j = 1; j < 9; j++) {
    var td = document.createElement('td');
    id++
    td.id = id
    if (i % 2 == j % 2) {
      td.className = "white";
    } else {
      td.className = "black";
    }
    tr.appendChild(td);
  }

  table.appendChild(tr);
}

divId.appendChild(table)

console.log(divId.children)

<div class="board"></div>

Answer 1

为什么是 div 和 tr？

const table = document.getElementById("board");
let id = 0;
for (var i = 1; i < 9; i++) {
  var tr = document.createElement('tr');
  for (var j = 1; j < 9; j++) {
    var td = document.createElement('td');
    td.id = `r${i}c${j}`
    td.className =  (i % 2 == j % 2) ? "white" : "black";
    tr.appendChild(td);
  }
  table.appendChild(tr);
}
const arr = table.querySelectorAll('td');
console.log([...arr].map(cell => cell.id))

table { border: 1px solid black; border-collapse: collapse;}
#board td {  height:50px; width: 50px; }
.white { background-color: white;}
.black { background-color: black; }

<table>
  <tbody id="board"></tbody>
</table>