javascript - document.querySelectorAll(多个数据集);

Question

我正在尝试使用:

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

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

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"] 将选择具有 data-r=0 和 data 的元素-c=0
• [data-r="0"],[data-c="0"] 将选择具有 data-r=0 或 的元素数据-c=0

第一个行为在 standard documentation 中有很好的描述。 .第二个只是一个 selector list .当然，您可以将它们组合起来。例如，您可以使用 [data-r="0"][data-c="0"]、[data-r="1"][data-c="选择表格的对 Angular 线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>