nodeList ?

products 배열안의 price와 title에 접근하여 html에 넣어보자

      var products = [
        { id: 0, price: 170000, title: 'Blossom Dress' },
        { id: 1, price: 250000, title: 'Springfield Shirt' },
        { id: 2, price: 160000, title: 'Black Monastery' },
      ];

      const cardTitle = document.querySelectorAll('.card-body h5');
      const cardPrice = document.querySelectorAll('.card-body p');

   
      products.forEach((i, index) => {
        cardTitle[index].innerHTML = i.title;
      });

 console.log(cardTitle);
 -> 콘솔 화면
 
NodeList(3) [h5, h5, h5]
0: h5
1: h5
2: h5
length: 3

cardTitle이 왜 NodeList 라는 걸까 ❓

cardTitle가 NodeList인 이유는 document.querySelectorAll('.card-body h5')를 통해 가져온 결과입니다. querySelectorAll 메서드는 주어진 선택자에 해당하는 모든 요소를 가져와 NodeList로 반환합니다.

그래서 NodeList 란 ❓

NodeList

NodeList는 DOM 요소의 컬렉션으로, 배열과 유사한 형태를 가지고 있습니다. 그러나 NodeList는 배열과는 다른 객체 유형이며, 일부 배열 메서드나 속성을 직접적으로 사용할 수 없습니다. NodeList에는 forEach 메서드를 사용할 수 있으며, 일반적으로 for 루프나 forEach 메서드를 사용하여 각 요소에 접근하고 조작할 수 있습니다.

따라서, cardTitle는 .card-body h5 선택자에 해당하는 모든 요소를 포함하는 NodeList입니다. 각 요소에 접근하려면 인덱스를 사용하여 cardTitle[index]와 같이 접근할 수 있습니다.

html title과 price에 값을 넣은 결과 화면