Получение карточек после фетчинга и рендера. Как получить отрендеренные каточки?

Question

Фетчу данные, и на их основе рендерю карточки на странице.

Как мне при помощи 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();
}

Answer 1

Вариант в лоб, это получить коллекцию сразу после создания элементов:

document.querySelectorAll('.catalog__item');

Если нужна живая коллекция, то можно сделать так:

document.getElementsByClassName('catalog__item');

Это может быть представлено в виде:

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);
   }
   return document.querySelectorAll('.catalog__item'); // или document.getElementsByClassName
}
fetchingData().then(res => { ... })

или

let elementsRender;
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);
   }
   elementsRender = document.querySelectorAll('.catalog__item'); // или document.getElementsByClassName
}

Предложу еще один варимнт. Он вернет такую же коллекцию элементов в виде массива(Немного изменен код)

  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);
      return card; // Добавлен return
    }
  }

  function fillCard(element, parentSelector) { // Работаем с элементом
    new CarCard(
      element.src,
      element.alt,
      element.year,
      element.type,
      element.name,
      element.text,
      element.price,
      parentSelector
    ).render();
  }

  async function fetchingData(dataBase, parentSelector) {
    const res = await fetch(dataBase);
    const carsData = await res.json();
    document.querySelectorAll('.skeleton').forEach(item => item.remove());
    return carsData.map(item => fillCard(item, parentSelector)); // Возвращаем результат
  }

В метод render() класса добавлен return, который возвращает созданный элемент.
В функцию и конструктор класса передается сам элемент возвращенного массива, а не сам массив

БЛОГ НА HUSL

Получение карточек после фетчинга и рендера. Как получить отрендеренные каточки?

Ответы (1 шт):