querySelector(".viewer > img") ???

(10-09 image_ex/index.js 에서)

Q1.

내가 궁금한 점이라서 다시 한 번 확인 부탁해. document.querySelector(".viewer > img") 이 내용에서, .viewer > img 이렇게 선택하는 것은, .viewer의 직계 자식의 img 태그들 중 첫 번째 대상을 선택하는 거야?

 

 

 

A1.

ChatGPT의 말:

 

네, 정확합니다! 🎯

document.querySelector(".viewer > img")에서:

.viewer > img는

• .viewer의 직계 자식 중에서 img 태그를 찾는 선택자입니다.
• CSS 선택자 >는 직계 자식 관계를 나타냅니다.
• 따라서, .viewer 내부의 직계 자식 요소 중 첫 번째 img 태그를 선택합니다.

---

결론

.viewer > img는:

1. 클래스가 .viewer인 요소를 찾습니다.
2. 그 요소의 직계 자식 요소들 중에서 <img> 태그를 찾습니다.
3. 여러 개의 img 태그가 있어도 첫 번째 일치하는 태그만 선택합니다.

---

예시 코드로 확인

HTML 구조

<div class="viewer">
  <img src="image1.jpg" alt="Image 1">
  <div>
    <img src="image2.jpg" alt="Image 2">
  </div>
  <img src="image3.jpg" alt="Image 3">
</div>

동작:

const imgElement = document.querySelector(".viewer > img");
console.log(imgElement);

결과:

위 코드에서 선택되는 요소는 image1.jpg를 가리키는 첫 번째 <img>입니다. 이유는:

• 직계 자식만 탐색하므로 <div> 내부의 <img> (image2.jpg)는 선택되지 않습니다.
• .viewer의 직계 자식인 <img> 태그들 중 첫 번째 요소가 반환됩니다.

시각적 구분:

• 선택됨: <img src="image1.jpg" alt="Image 1">
• 무시됨: <img src="image2.jpg" alt="Image 2"> (중첩된 <div> 내부)
• 선택되지 않음: <img src="image3.jpg" alt="Image 3"> (이미 첫 번째 img를 선택했으므로)

---

혹시 더 궁금한 부분이 있다면 추가로 질문 주세요! 😊