document.querySelectorAll(多个数据集);答案

【问题标题】：document.querySelectorAll( more than one dataset );document.querySelectorAll(多个数据集);
【发布时间】：2018-01-26 23:21:21
【问题描述】：

我正在尝试使用：

document.querySelectorAll('[data-r=0 data-c=0]');

选择一个特定的 HTML 元素但它返回：

未捕获的 DOMException：无法对“文档”执行“querySelectorAll”：“[data-r=0 data-c=0]”不是有效的选择器。

我试图理解为什么。它不是一次查询2个数据集吗？我在网上找到的所有示例都只显示了 querySelectorAll 的示例，其中只有一个数据集。我正在尽量避免使用 JQuery，有什么办法吗？

    <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>

【问题讨论】：

标签： javascript html dataset selectors-api

【解决方案1】：

首先，您需要添加引号，以便选择器有效。然后根据您实际想要选择的内容，您有两种不同的语法：

[data-r="0"][data-c="0"] 将选择具有 data-r=0 和 data-c=0 的元素
[data-r="0"],[data-c="0"] 将选择具有 data-r=0 或 data-c=0 的元素

standard documentation 中很好地描述了第一个行为。第二个只是一个selector list。当然，您可以将它们结合起来。例如，您可以使用[data-r="0"][data-c="0"], [data-r="1"][data-c="1"], [data-r="2"][data-c="2"] 选择表格的对角线。

演示

// Matches 1 element
console.log(document.querySelectorAll('[data-r="0"][data-c="0"]'));

// Matches 5 elements
console.log(document.querySelectorAll('[data-r="0"],[data-c="0"]'));

// Matches the 3 diagonal elements
console.log(document.querySelectorAll('[data-r="0"][data-c="0"], [data-r="1"][data-c="1"], [data-r="2"][data-c="2"]'));

<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>

【讨论】：

非常感谢。这很有帮助。

【解决方案2】：

[data-r=0],[data-c=0] 应该可以工作。

【讨论】：

在整数周围不加引号是行不通的。

【解决方案3】：

将您的 data-r=0 放入 ''（引号）

 <td class="box" data-r='0' data-c='0'></td>

并使用

document.querySelectorAll("[data-r='0'][data-c='0']");

不要忘记在querySelector的''中放入属性值

【讨论】：