[javascript] querySelector(),querySelectorAll()

오늘은 queryselector에 대해 글을 써보려고 한다.

쿼리셀렉터는 내가 원하는 element를 html에서 가져오기 위해 사용하는데, 간혹 이런 경우가 있다.

class이름을 써서 가져오고 싶은데, 여러개의 요소에 class 이름이 동일하게 들어가는 경우이다.

 

 

위처럼, show-modal이라는 class를 세 가지의 button element가 동일하게 가지고 있다면 어떻게 해야 할까?

물론 다른 id값을 부여한다던지, 개별적으로 선택할 수 있는 방법이 있긴 하다.

그러나 세 가지 요소에 모두 동일한 함수를 적용하고 싶은거라면 그건 너무 비효율적인 방법이다.

그럴때 사용하는 것이 querySelectorAll()이다.

 

querySelectorAll()을 사용하면 동일한 클래스를 가지는 요소를 모두 가져올 수 있다.

 

🤔 그러면 어떻게 개별 요소에 함수를 적용시키나요?

1) 첫 번째: forEach를 사용

modalBtns는 내가 querySelectorAll()로 가져온 배열이다. 그렇기 때문에 각 배열에 담겨 있는 요소들 (= 동일 클래스를 가지는 버튼) 에게, 각각 이벤트 리스너를 사용해 showModal()이라는 함수를 호출하게 한다.

modalBtns.forEach( item => {

item.addEventListener('click', () => {

showModal();

});

});

 

1) 두 번째: for 함수를 사용

for 함수를 사용해, i라는 배열에서 특정 값을 가져오기 위한 변수를 설정한 후

배열의 개별 값들에 접근하여 함수를 호출하게 한다.

for (let i = 0; i < modalBtns.length; i++) {

modalBtns[i].addEventListener('click', showModal);

}

 

 

 

JS 코드 전체

'use strict';

const modalBtns = document.querySelectorAll('.show-modal');

const closeModalBtn = document.querySelector('.modal .close-modal');

const overlay = document.querySelector('.overlay');

const modal = document.querySelector('.modal');

//개별 모달들에 모두 적용해서 class 지움. for문 써도 되고.

modalBtns.forEach(item => {

item.addEventListener('click', () => {

showModal();

});

});

//모달창 열기

function showModal() {

// $('.modal').removeClass('hidden');

// $('.overlay').removeClass('hidden');

modal.classList.remove('hidden');

overlay.classList.remove('hidden');

}

//모달창 닫기

function closeModal() {

// $('.modal').addClass('hidden');

// $('.overlay').addClass('hidden');

modal.classList.add('hidden');

overlay.classList.add('hidden');

}

//esc버튼 감지

// $(document).keydown(function (event) {

// if (event.keyCode == 27 || event.which == 27) {

// closeModal();

// } else {

// false;

// }

// });

function escDetect(event) {

if (event.keyCode == 27 || event.which == 27) {

closeModal();

} else {

false;

}

}

//모달 창이 아닌 영역 누르면 닫히게

// window.addEventListener('click', e => {

// e.target.className === overlay.className ? closeModal() : false;

// });

document.addEventListener('keydown', escDetect);

overlay.addEventListener('click', closeModal);

closeModalBtn.addEventListener('click', closeModal);