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

Question

我目前正在玩Zendesk，并尝试对页面上的text元素进行更改。可悲的是，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);

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

就像找到一个以“ 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关于NodeLists的答案。所以最终的代码是：var items = document.querySelectorAll("[id^=ember] > div.comment > div > p");items.forEach (item => {  var itemtext = item.textContent;  console.log(itemtext);} );最后，对于您似乎想做的事情，您可能想要textContent而不是innerHTML。这样可以避免对属性，注释等的错误点击。

Answer 2

document.querySelectorAll返回NodeList必须迭代的。您应该能够使用aforEach来遍历元素querySelectorAll选择。var items = document.querySelectorAll("[id^=ember] > div.comment > div > p");items.forEach (item => {  var itemtext = item.textContent;  console.log(itemtext);} );