document.querySelectorAll多data属性选择报错原因及无jQuery解决办法

安全阿岳

2026-5-15

解决querySelectorAll匹配多个data属性的报错问题

嘿，我来帮你搞定这个问题！你遇到的报错不是因为不能同时查询多个data属性，而是选择器的语法写错了。先看看你的目标HTML结构：

<table id="board"> 
  <tr> 
    <td class="box" data-r=0 data-c=0></td> 
    <td class="box" data-r=0 data-c=1></td> 
    <td class="box" data-r=0 data-c=2></td> 
  </tr> 
  <tr> 
    <td class="box" data-r=1 data-c=0></td> 
    <td class="box" data-r=1 data-c=1></td> 
    <td class="box" data-r=1 data-c=2></td> 
  </tr> 
  <tr> 
    <td class="box" data-r=2 data-c=0></td> 
    <td class="box" data-r=2 data-c=1></td> 
    <td class="box" data-r=2 data-c=2></td> 
  </tr> 
</table>

报错原因

你写的选择器[data-r=0 data-c=0]不符合CSS选择器规范：每个属性选择器都需要单独用方括号包裹。把两个data属性塞在同一个方括号里，浏览器无法正确解析这个语法，所以才会抛出Uncaught DOMException。

解决办法（原生JS，无需jQuery）

完全可以同时匹配多个data属性，只要用正确的选择器写法就行：

基础写法：独立包裹每个属性选择器
把每个data属性的选择器单独放在方括号里，同时建议给属性值加上引号（规范写法，避免特殊值的解析问题）：
```
// 匹配同时拥有data-r="0"和data-c="0"的元素
const targetElements = document.querySelectorAll('[data-r="0"][data-c="0"]');
```
优化写法：结合类选择器缩小范围
因为你的目标元素都带有box类，先通过类选择器筛选，再匹配data属性，能提升查询效率：
```
// 先筛选.box类元素，再匹配目标data属性
const targetElements = document.querySelectorAll('.box[data-r="0"][data-c="0"]');
```