[movie PJ_day5] 카드의 id를 어떻게 가져오지? - closest(), getAttribute()

이전 상황

 

어제는 여러 특강 일정으로 구현하지 못하고 방법만 정리해놨던 내용을 오늘 하나씩 실행해보았다.

 

먼저,

모달창에 클릭한 영화의 정보들을 띄우기 위해서 카드의 id를 가져와야 했다.

튜터님의 도움으로 closest()라는 메서드를 활용하여 카드 어느 곳을 누르던 하나의 묶음으로 엮어주었다.

 

 

문제 상황

이제 클릭한 카드 즉, e.target의 id를 가져와야 했다.

for문으로 찍어낼 카드의 형식을 살펴보았다.

for (let i = 0; i < posts.length; i++) {
    temp_html += `
    <div data-id="${posts[i].id}" class="mvCard">
         <img id="poster" src="${
           baseImgUrl + posts[i].poster_path
         } class="card-img-top alt="poster">
         <p>${posts[i].title}</p>
         <p>평점: ${posts[i].vote_average}<span id="mvaver"></span></p>
    </div>`;
  }

여기서 data-id가 필요하다!

 

JavaScript의 요소에서 속성값을 가져오는 방법으로 getAttribute() 함수를 알게 되었다.

 

 

📍getAttribute 란?

 

DOM 요소에서 속성 값을 가져오는 함수이다.

주어진 요소에서 속성이 존재할 경우, 그 속성의 값을 문자열로 변환한다.

 

예시)

[HTML]

<video src="video.mp4" autoplay></video>

 

[JavaScript]

const myVideo = document.querySelector("video");

/* 속성의 값을 문자열로 반환 */
console.log(myVideo.getAttribute("src")); // "video.mp4"

/* 속성의 값이 존재하지 않으면 빈 문자열("")을 반환 */
console.log(myVideo.getAttribute("autoplay")); // ""

/* 해당 요소에 일치하는 속성이 없다면 null을 반환 */
console.log(myVideo.getAttribute("loop")); // null

출처: getAttribute 함수

 

따라서 변수 cardID를 선언하여 

const cardID = e.target.getAttribute("data-id");
console.log(cardID);

를 실행하였지만 콘솔 창에는 'null'이 떴다. 왜지?

 

939243 이 떠야 하는데.....

 

 

"data-id" 대신 다른 요소들을 넣어봤다.

"id"를 넣어보니 poster가 떴다. 이는 img 태그에 있는 id 값을 가져온 것이다.

 

 

그렇다면, data-id를 img 태그에 넣어볼까?

data-id 가 잘 뜨는 것을 확인할 수 있다.

 

그럼, 왜 div태그에서는 안 뜨던 것이 img 태그에서는 잘 뜨는 것일까??

 

 

문제 해결

cardSection.addEventListener("click", function (e) {
console.log(e.target.closest(".mvCard"));

이 로직을 다시 한 번 자세히 살펴보자.

 

 

📍closest 메서드란?

 

주어진 CSS 선택자와 일치하는 요소를 찾을 때까지

자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회한다.

출처:closest 메서드

 

 

예를 들어

내가 만든 for문 내의 temp 카드 로직을 보면

 temp_html += `
    <div data-id="${posts[i].id}" class="mvCard">
         <img id="poster" src="${
           baseImgUrl + posts[i].poster_path
         } class="card-img-top alt="poster">
         <p>${posts[i].title}</p>
         <p>평점: ${posts[i].vote_average}<span id="mvaver"></span></p>
    </div>`;

 

<img> 를 클릭하던, <p>를 클릭하던 모두 <div>로 인식한다는 것이다.

왜냐하면 <div>에 class를 주었고, 이를 CSS에서 활용했기 때문!

 

따라서 getAttribute를 e.target에서 실행할 게 아니라 mvCard이었다.

cardSection.addEventListener("click", function (e) {
  console.log(e.target.closest(".mvCard"));
  const mvCard = e.target.closest(".mvCard");
  const cardID = mvCard.getAttribute("data-id");
  console.log(cardID);
   });

 

👇🏻통일감 있게 정리했다.

cardSection.addEventListener("click", function (e) {
  const mvCard = e.target.closest(".mvCard");
  const cardID = mvCard.getAttribute("data-id");
  });

 

 

참고:

https://developer.mozilla.org/ko/docs/Web/API/Element/closest