[JavaScript] 자바스크립트 셀렉터 조건 만족하는 요소 모두 가져오기

131_자바스크립트 셀렉터 조건 만족하는 요소 모두 가져오기

[적용]

• 셀렉터명과 일치하는 요소를 정리하여 작업을 처리하고 싶을 때

---

[문법]

메소드	의미	반환
document.querySelectorAll(셀렉터명)	셀렉터명 일치 요소 모두 가져오기	배열(NodeList)

---

[내용]

document.querySelectorAll()은 셀렉터명과 일치하는 HTML 요소를 모두 가져오며,

반환값은 요소를 하나의 배열로 정리한 객체(NodeList 객체)다.

배열 요소의 값은 forEach()를 사용해 접근할 수 있다.

콜백 함수를 사용한 요소의 처리도 가능하다.

 

HTML                                                                                                                                                              index.html

<div class="box">박스1</div>
<div class="box">박스2</div>
<div class="box">박스3</div>

JavaScript                                                                                                                                                          main.js

// .box 요소 모두 가져오기
const boxList = document.querySelectAll('.box');
boxList.forEach((targetBox) => {
  // 각 box 요소 출력
  console.log(targetBox);
});

---

[예시 1]

forEach() 외에도 for문을 사용할 수 있다.

const boxList = document.querySelectorAll('.box');
const boxLength = boxList.length;

for (let index = 0; index < boxLength; index++) {
  // 각 box 요소 출력
  console.log(boxList[index]);
});

 

---

[예시 2]

3개의 box 중 클릭한 곳의 텍스트를 알림창으로 표시하는 샘플을 확인해 보자

 

HTML                                                                                                                                                              index.html

<div class="box">박스1</div>
<div class="box">박스2</div>
<div class="box">박스3</div>

JavaScript                                                                                                                                                          main.js

// 각 .box 요소 루프 처리
document.querySelectorAll('.box').forEach((targetBox) => {
  // .box 요소 클릭 시 처리 작업
  targetBox.addEventListener('click', () => {
    // 클릭한 .box 요소의 텍스트 표시
    alert(`${targetBox.textContect} 클릭`);
  });
});

 

실행결과

클릭한 요소의 내용이 알림창으로 표시된다.

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김