javascript - 如何选择具有动态 ID 的父元素的嵌套子元素？

Question

我目前正在使用 Zendesk，并尝试更改页面上的文本元素。遗憾的是，Zendesk 的元素足够动态，以至于主元素的名称会在每次页面加载时发生变化。

幸运的是，元素树的结构保持相当静态，但只有父元素的名称发生了变化:

#ember6030 > div.comment > div > p

#ember3483 > div.comment > div > p

目前，这是我目前所处的位置:

var item = document.querySelectorAll("[name^=ember] > div.comment > div > p");
var itemtext = item.innerHTML;
console.log(itemtext);

我确定我遗漏了一些东西，但是我的选择器变量不正确吗？

类似于查找一个以“ember”开头但随后跟随父子树的其余部分的元素。

<小时/>

编辑:事情比我想象的要顽固一些，但如果这有帮助的话，我有一些额外的细节:对于 div.comment > div > p 元素，其中有一些加载。目前，我想尝试仅定位一个元素，但如果我能够在控制台消息中获取所有这些元素的文本内容，那就太棒了。

Answer 1

对于您将使用的 CSS 路径:

var item = document.querySelector("[id^=ember] > div.comment > div > p");
var itemtext = item.textContent;
console.log(itemtext);

因为 # 是 id 属性的 CSS 选择器，而不是 name。

另请参阅David Klinge's answer关于 NodeList。

所以最终代码是:

var items = document.querySelectorAll("[id^=ember] > div.comment > div > p");
items.forEach (item => {
  var itemtext = item.textContent;
  console.log(itemtext);
} );

<小时/>

最后，对于您似乎想要做的事情，您可能需要 textContent 而不是 innerHTML。这可以避免对属性、评论等的错误点击。