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属性而不是name的CSS选择器。

另请参阅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。这样可以避免误击属性，评论等。

Answer 2

document.querySelectorAll返回必须迭代的NodeList。您应该可以使用forEach来迭代querySelectorAll选择的元素。

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

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

2 个答案: