如何选择具有动态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);

} );