用于动态跨度 ID 的 querySelectorAll答案

【问题标题】：querySelectorAll for dyanmic span id用于动态跨度 ID 的 querySelectorAll
【发布时间】：2019-02-01 12:35:56
【问题描述】：

我正在尝试通过 Google 跟踪代码管理器调用以下内容：

document.getElementById('Travel_J608883332').innerText

我遇到的一个问题是，每次预订时 ID 都会发生变化，即 J608883332 对于预订号是动态的。

我已经阅读了关于使用 querySelectorAll 方法创建一个可能动态拉回元素的正则表达式模式：

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

但是，当我在 Google 跟踪代码管理器中进行测试时，上述内容返回“未定义”。我假设我在构建它时出错了？

为这个幼稚的问题道歉，我是这种方法的新手。

谢谢， M

【问题讨论】：

Can I use a regular expression in querySelectorAll?的可能重复

标签： javascript google-tag-manager

【解决方案1】：

您可以使用prefix attribute selector。此外，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>

【讨论】：

【解决方案2】：

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 : '-');

【讨论】：