Question

我有一个HTML文档，其元素包含内部带有值的id标记。我试图从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属性的标签，然后按强制转换为数字的属性是否满足条件进行过滤：< / p>

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通常应该表示绝对唯一和单数。如果要将每个rect与一个数字关联，则可以改用data属性：

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>

Answer 2

尝试

[...document.querySelectorAll('.ocrx_word')].filter(x=>+x.id>2)

let n=[...document.querySelectorAll('.ocrx_word')].filter(x=>+x.id>2)

console.log(n);

<rect id='1' class='ocrx_word'></rect>
<rect id='2' class='ocrx_word'></rect>
<rect id='3' class='ocrx_word'></rect>
<rect id='4' class='abc'></rect>
<rect id='a' class='ocrx_word'></rect>

根据条件选择HTML标签

2 个答案: