如何 select 具有动态 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。

另请参阅关于节点列表。

所以最终代码是：

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 returns 必须迭代的 NodeList。您应该能够使用 forEach 遍历 querySelectorAll 选择的元素。

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

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

How can I select a nested child element of a parent element that has a dynamic ID?

javascript

css-selectors

tampermonkey