Как выбрать вложенный дочерний элемент родительского элемента с динамическим идентификатором?

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);

, поскольку # является селектором CSS для атрибута id, а не name.

См. Также Ответ Дэвида Клинге о 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, который должен быть повторен.Вы должны иметь возможность использовать forEach для перебора элементов querySelectorAll select.

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