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는 DOM 요소의 컬렉션으로, 배열과 유사한 형태를 가지고 있습니다. 그러나 NodeList는 배열과는 다른 객체 유형이며, 일부 배열 메서드나 속성을 직접적으로 사용할 수 없습니다. NodeList에는 forEach 메서드를 사용할 수 있으며, 일반적으로 for 루프나 forEach 메서드를 사용하여 각 요소에 접근하고 조작할 수 있습니다.
따라서, cardTitle
는 .card-body h5 선택자에 해당하는 모든 요소를 포함하는 NodeList입니다. 각 요소에 접근하려면 인덱스를 사용하여 cardTitle[index]
와 같이 접근할 수 있습니다.
html title과 price에 값을 넣은 결과 화면