Имя элемента с подстановочным знаком, сопоставленное с «querySelector()» и «querySelectorAll()» в JavaScript

Проблема:

Запрос к XML-документу с элементами, в имена которых встроены определенные строки, может оказаться сложной задачей. Хотя CSS поддерживает подстановочные знаки для запросов атрибутов, похоже, что такая же функциональность отсутствует для имен элементов.

Решение:

К сожалению, не существует простого способа сопоставить элемент с подстановочным знаком. имена, используя «querySelector()» или «querySelectorAll()». Однако существуют альтернативные подходы:

• Сопоставление атрибутов: CSS предоставляет подстановочные знаки для значений атрибутов. Чтобы сопоставить элементы с определенной строкой в ​​имени, найдите наличие этой строки в любом из их атрибутов, используя следующий синтаксис:

  • [attribute^='value'] соответствует элементам, атрибут которых начинается со 'value'.
  • [attribute$='value'] соответствует элементам, атрибут которых заканчивается на 'value'.
  • [attribute*='value'] соответствует элементам, атрибут которых заканчивается на 'value'.
  [attribute*='value'] соответствует элементам, атрибут которых заканчивается на 'value'. содержит значение.
Атрибут имени:

const elementsWithName = document.querySelectorAll('[name*="name"]');

const elementsWithName = document.querySelectorAll('[name*="name"]');

Если вы ищете совпадение с подстановочными знаками для самого имени тега элемента, в настоящее время нет прямого решения с использованием «querySelector()» или "querySelectorAll()".