使用data属性值通过querySelector选择DOM节点时遇到问题

问题描述 #

我有9个如下结构的HTML元素：

<div class="game-cell" data-row="1" data-column="1"></div>
<div class="game-cell" data-row="1" data-column="2"></div>
<div class="game-cell" data-row="1" data-column="3"></div>
<div class="game-cell" data-row="2" data-column="1"></div>
<div class="game-cell" data-row="2" data-column="2"></div>
<div class="game-cell" data-row="2" data-column="3"></div>
<div class="game-cell" data-row="3" data-column="1"></div>
<div class="game-cell" data-row="3" data-column="2"></div>
<div class="game-cell" data-row="3" data-column="3"></div>

尝试用下面的代码逐个选择节点：

document.querySelector(`.game-cell, [data-row="1"], [data-column="2"]`)

但不管怎么改参数，结果始终选中data-row="1"且data-column="1"的节点：

<div class="game-cell" data-row="1" data-column="1"></div>

请问问题出在哪？怎么才能选中目标节点？

原因与解决方法 #

问题原因 #

1. querySelector的特性限制：这个方法只会返回DOM中第一个匹配选择器规则的元素。你写的选择器用逗号分隔，是「或」逻辑——只要满足.game-cell、data-row="1"、data-column="2"其中一个条件就会匹配。而DOM里第一个符合条件的元素就是第一个.game-cell（即data-row=1, data-column=1的节点），所以每次都返回它。
2. 选择器逻辑错误：逗号分隔的选择器是「或关系」，如果你想选中同时满足类名、指定data-row和data-column的元素，不能用逗号，必须把条件连写表达「且关系」。

解决办法 #

1. 选中单个目标节点

把选择器改成「且关系」，同时匹配类名和两个data属性，比如要选data-row="1"且data-column="2"的节点：

// 精准匹配单个指定节点
document.querySelector('.game-cell[data-row="1"][data-column="2"]')

2. 选中所有game-cell节点（逐个操作）

如果要获取所有9个节点再逐个处理，使用querySelectorAll，它会返回所有匹配的元素集合：

// 获取所有game-cell节点
const allCells = document.querySelectorAll('.game-cell');
// 按索引访问单个节点：比如取第5个节点（索引从0开始）
const targetCell = allCells[4];
// 遍历所有节点做批量操作
allCells.forEach(cell => {
  console.log(cell.dataset.row, cell.dataset.column);
});

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