如何获取div元素的子元素并在控制台完整输出全部元素？

我用代码创建了一个棋盘，想要获取所有方块元素并在控制台打印完整列表（方便后续转换为数组），但实际得到的结果是HTMLCollection [div#id, id: div#id]，看不到64个方块。请问如何才能在控制台输出所有元素？

原始代码 #

HTML #

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

JavaScript #

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)

解决步骤 #

1. 先获取正确的元素集合 #

你当前打印的divId.children只是.board元素的直接子元素（也就是你创建的那个id为id的div），根本没拿到里面的64个td方块。要获取所有方块，需要用更精准的选择器：

// 获取所有棋盘方块（td元素）
const allChessSquares = document.querySelectorAll('#id td');

querySelectorAll返回的是NodeList，支持更多数组式操作，比getElementsByTagName这类返回的HTMLCollection更方便。

2. 在控制台输出完整列表 #

要让控制台显示所有元素，可通过以下几种方式：

• 转数组输出：用扩展运算符或Array.from把集合转成数组，控制台会展开显示所有元素：

  console.log([...allChessSquares]);
  // 或者
  console.log(Array.from(allChessSquares));
  

• 表格形式输出：用console.table可以更直观地以表格展示元素的关键属性（比如id、className）：

  console.table(allChessSquares, ['id', 'className']);
  

• 逐个遍历输出：如果需要查看单个元素的细节，可以循环遍历：

  allChessSquares.forEach(square => console.log(square));
  

修改后的完整代码示例 #

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)

// 获取所有方块并输出完整列表
const allChessSquares = document.querySelectorAll('#id td');
console.log([...allChessSquares]);

内容的提问来源于stack exchange，提问作者willd