document.querySelectorAll(不止一个数据集);

Question

我正在尝试使用：

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

到select一个特定的HTML元素但是它returns:

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[data-r=0 data-c=0]' is not a valid selector.

我正在尝试了解原因。不是一次查询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] 应该可以。

Answer 2

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

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

并使用

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

不要忘记在 querySelector

中将属性值放入 ''

Answer 3

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

[data-r="0"][data-c="0"] 将 select 具有 data-r=0 和 data-c=0
[data-r="0"],[data-c="0"] 将 select 具有 data-r=0 或 data-c=0

第一个行为在 standard documentation. The second one is simply a selector list 中有很好的描述。当然，您可以将它们组合起来。例如，您可以使用 [data-r="0"][data-c="0"], [data-r="1"][data-c="1"], [data-r="2"][data-c="2"].

select table 的对角线

演示

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

document.querySelectorAll(不止一个数据集);

document.querySelectorAll( more than one dataset );

html

javascript

dataset

selectors-api

演示