Выбор тегов HTML по условию
У меня есть HTML-документ с элементами, содержащими теги 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.info(wantedIds)
Но я получаю
document.querySelectorAll(...).slice is not a function
@CertainPerformance Нет. Это относится к оператору Spread const rects = [...document.querySelectorAll('.ocrx_word')]
Оператор распространения не вызывает slice - опубликованный код не должен приводить к описанной вами ошибке.
Я успешно выбрал нужные прямоугольники, но когда я попытался их отфильтровать, он сказал, что reacts.filter не является функцией. let word = document.querySelector('[bbox=' + '"' + pageOneWord + '"' + ']'[0]); const rects = document.querySelectorAll('.ocrx_word[id]') const wantedIds = rects.filter(({id}) => Number(id) > word) console.info(wantedIds)
Вы не преобразовали NodeList в массив — вы должны сделать это, чтобы вызвать filter на нем. (см. код в ответе - для этого я разложил NodeList в массив)
Да, я понимаю, но когда я звоню оператору спреда, он дает мне: document.querySelectorAll(...).slice is not a function
Синтаксис распространения не должен вызывать slice — если это так, ваш интерпретатор (или движок браузера) неисправен. Я не могу воспроизвести проблему - нажмите "Выполнить фрагмент кода" в моем ответе. Распространение вызывает метод [Symbol.iterator] для объекта — Array.prototype.slice не задействован (и NodeList.prototype.slice не существует). Вы также можете преобразовать в массив, передав подобный массиву объект в Array.from
@CertainPerformance Это сработало с Array.from. Спасибо большое
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы не можете задавать и выполнять математические условия внутри строки запроса, но вы можете выбрать все теги, у которых есть атрибут id, а затем отфильтровать по тому, соответствует ли атрибут, приведенный к числу, вашему условию:
const rects = [...document.querySelectorAll('rect[id]')];
const filteredRects = rects.filter(({ id }) => Number(id) > 2);
console.info(filteredRects);<rect id='1'></rect>
<rect id='2'></rect>
<rect id='3'></rect>Тем не менее, числовые индексированные идентификаторы довольно странны и, вероятно, в большинстве ситуаций являются запахом кода - идентификаторы, вероятно, обычно должны указывать что-то абсолютно уникальный и единственное число. Если вы хотите связать каждый rect с числом, возможно, вместо этого используйте атрибут данных:
const rects = [...document.querySelectorAll('rect[data-num]')];
const filteredRects = rects.filter(({ dataset: { num }}) => Number(num) > 2);
console.info(filteredRects);<rect data-num='1'></rect>
<rect data-num='2'></rect>
<rect data-num='3'></rect>Спасибо за вашу помощь. Я попытался использовать ваше предложение, но столкнулся с проблемой. Пожалуйста, просмотрите изменения внутри моего вопроса
пытаться
[...document.querySelectorAll('.ocrx_word')].filter(x=>+x.id>2)
let n=[...document.querySelectorAll('.ocrx_word')].filter(x=>+x.id>2)
console.info(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>
Ошибка в
.slice(), но насколько я вижу, вы нигде в коде не вызываетеslice?