querySelectorAll для идентификатора динамического диапазона

Question

Я пытаюсь позвонить в Google Tag Manager через:

document.getElementById('Travel_J608883332').innerText

Проблема, с которой я столкнулся, заключается в том, что идентификатор меняется с каждым бронированием, т.е. J608883332 является динамическим по отношению к номеру бронирования.

Я читал об использовании метода querySelectorAll для создания шаблона Regex, который может динамически возвращать элемент:

return document.querySelectorAll('span[id="^TravelBy\_J.*"]').innertext

Однако вышесказанное возвращает "неопределенное", когда я тестирую в Google Tag Manager.Я предполагаю, что допустил ошибку при его создании?

Извиняюсь за наивный вопрос, я новичок в этом методе.

Спасибо, M

Answer 1

querySelectorAll возвращает NodeList, а innerText не является атрибутом NodeList.Другой момент заключается в том, что querySelectorAll не поддерживает регулярные выражения, но вместо этого вы можете использовать селектор CSS:

var queryResult = document.querySelectorAll('span[id^="Travel"]');
console.log(queryResult.innerText); // >>> undefined
console.log(queryResult != null && queryResult.length > 0 ? queryResult[0].innerText : '-');

Answer 2

Можно использовать с селектором атрибута префикса .Кроме того, коллекция, возвращаемая document.querySelectorAll(), не имеет атрибута innerText.В этом примере я преобразовал коллекцию в массив и извлек тексты, сопоставляя элементы.Если у вас есть только один элемент каждый раз, используйте document.querySelector(), а затем вы можете извлечь внутренний текст напрямую.

const text = Array.from(document.querySelectorAll('span[id^="TravelBy_"]'))
  .map(el => el.innerText);

console.log(text);

<span id="TravelBy_123">123</span>
<span id="TravelBy_456">456</span>