如何使用JavaScript通过data-cell-index获取单元格内容值？

这里有几种简单的实现方式，按需选用：

1. 单独获取指定索引的单元格内容 #

直接用属性选择器定位目标元素，再提取文本内容：

// 获取索引0的单元格内容（A）
const cellA = document.querySelector('[data-cell-index="0"]');
const contentA = cellA.textContent.trim();
console.log(contentA); // 输出 "A"

// 获取索引1的单元格内容（B）
const cellB = document.querySelector('[data-cell-index="1"]');
const contentB = cellB.textContent.trim();
console.log(contentB); // 输出 "B"

2. 批量获取所有带data-cell-index的单元格内容 #

如果需要一次性获取所有符合条件的单元格内容，可以用querySelectorAll遍历：

// 获取所有带data-cell-index属性的单元格
const cells = document.querySelectorAll('[data-cell-index]');

// 把索引和内容整理成数组
const cellData = Array.from(cells).map(cell => ({
  index: cell.dataset.cellIndex, // 通过dataset便捷获取data属性值
  content: cell.textContent.trim()
}));

console.log(cellData);
// 输出：[{index: "0", content: "A"}, {index: "1", content: "B"}]

3. 通过父容器缩小查找范围 #

如果页面中有多个类似结构，可以先定位父容器，再在内部查找，避免误选：

// 先获取父容器
const gameContainer = document.getElementById('game--con');

// 在父容器内查找目标单元格
const cellA = gameContainer.querySelector('[data-cell-index="0"]');
console.log(cellA.textContent.trim()); // 输出 "A"

小提示 #

• textContent.trim()用来清理单元格内可能存在的换行、空格等多余空白；
• dataset.cellIndex是HTML5提供的API，能直接读取data-cell-index的属性值，比getAttribute('data-cell-index')更简洁。

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