javascript - 根据条件选择 HTML 标签

Question

我有一个 HTML 文档，其中的元素包含 id 标签，其中包含值。我试图选择所有带有 id 的标签，它们的值比某个数字更大

示例:我想选择 id > 2 的所有矩形

<rect id='1'></rect>
<rect id='2'></rect>
<rect id='3'></rect>

我看了很多例子，但没有找到符合我要求的。我想到了类似的事情:

document.querySelectorAll('[id]') 

但是我不知道里面的条件怎么写。

[编辑]

我忘了提及，我只想要那些包含 ocrx_word 类名的元素我尝试运行它们

  const wordId = document.querySelector('[bbox=' + '"' + pageOneWord + '"' + ']'[0]);
        const rects = [...document.querySelectorAll('.ocrx_word[data-num]')]
        const wantedIds = rects.filter(({id}) => Number(id) > word)
        console.log(wantedIds)

但是我收到了

document.querySelectorAll(...).slice is not a function 

Answer 1

您无法在查询字符串中设置和执行数学条件，但您可以选择具有 id 属性的所有标记，然后根据该属性(强制为数字)是否满足您的要求进行过滤条件:

const rects = [...document.querySelectorAll('rect[id]')];
const filteredRects = rects.filter(({ id }) => Number(id) > 2);
console.log(filteredRects);

<rect id='1'></rect>
<rect id='2'></rect>
<rect id='3'></rect>

也就是说，数字索引 ID 非常奇怪，并且在大多数情况下可能是一种代码味道 - ID 通常应该指示一些绝对唯一且单一的东西。如果您想将每个矩形与一个数字相关联，也许可以使用数据属性:

const rects = [...document.querySelectorAll('rect[data-num]')];
const filteredRects = rects.filter(({ dataset: { num }}) => Number(num) > 2);
console.log(filteredRects);

<rect data-num='1'></rect>
<rect data-num='2'></rect>
<rect data-num='3'></rect>