Получение карточек после фетчинга и рендера. Как получить отрендеренные каточки?
Фетчу данные, и на их основе рендерю карточки на странице.
Как мне при помощи querySelectorAll получить эти карточки после их рендера?
Вот функция запроса:
async function fetchingData(dataBase, parentSelector) {
const res = await fetch(dataBase);
const carsData = await res.json();
document.querySelectorAll('.skeleton').forEach(item => item.remove());
for (let i = 0; i < carsData.length; i++) {
fillCard(carsData, i, parentSelector);
}
}
Класс карточки:
class CarCard {
constructor(src, alt, year, type, name, text, price, parentSelector) {
this.src = src;
this.alt = name;
this.year = year;
this.type = type;
this.name = name;
this.text = text;
this.price = price;
this.parentSelector = document.querySelector(parentSelector);
}
render() {
const card = document.createElement('div');
card.classList.add('catalog__item');
card.innerHTML = `
<a class="catalog__item-link" href="#">
<img class="catalog__item-img" src=${this.src} alt=${this.alt}>
</a>
<div class="catalog__item-info">
<div class="catalog__item-top">
<span class="catalog__item-year">${this.year}</span>
<span>|</span>
<span class="catalog__item-type">${this.type}</span>
</div>
<div class="catalog__item-middle">
<div class="catalog__item-name">
${this.name}
</div>
<p class="catalog__item-text">
${this.text}
</p>
</div>
<div class="catalog__item-bottom">
<button class="catalog__item-btn btn">
Explore
</button>
<div class="catalog__item-price">
$${this.price}
</div>
</div>
</div>
`;
this.parentSelector.append(card);
}
}
Функция рендера:
function fillCard(arr, i, parentSelector) {
new CarCard(
arr[i].src,
arr[i].alt,
arr[i].year,
arr[i].type,
arr[i].name,
arr[i].text,
arr[i].price,
parentSelector
).render();
}
Источник: Stack Overflow на русском