Question

我正在尝试使用：

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

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

未捕获的DOMException：无法在'Document'上执行'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>

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

Answer 2

[data-r=0],[data-c=0]应该有用。

Answer 3

将数据-r = 0放入＆＃39;＆＃39; （引号）

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

并使用

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

不要忘记将属性值放入＆＃39;＆＃39;＆＃39;＆＃39;在querySelector

中

document.querySelectorAll（多个数据集）;

3 个答案:

演示