[JS] querySelector , querySelectorAll ?

자바스크립트에서 html DOM에 접근하여 제어하기 위해 

getElementById, querySelector, querySelectorAll 등의 

Document 메소드를 통해 객체를 가져온다.

 

 

querySelector ?

 

getElementById는 주어진 id를 가진 엘리먼트(요소)를 찾아오지만,

querySelector의 경우 id 혹은 class 중 주어진 선택자에 만족하는 요소를 찾아올 수 있다!

 

//id 선택자
document.querySelector("#id");

//class 선택자
document.querySelector(".class");

 

유의해야 할 점은 중복되는 id를 가진 경우 첫 번째의 요소만을 가져올 수 있는 것이다.

 

그렇다면 같은 선택자를 가진 모든 요소를 가져오고 싶을 때는 어떻게 해야 할까?

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

 

querySelectorAll ?

 

querySelector와 사용 방법은 동일하다.

하지만, querySelectorAll의 경우는 리턴 타입이 nodeList 이다! 유의하자.

 

예를 들어,

아래와 같이 같은 class 값을 가지는 li 요소가 3개가 있다. 

 

<ul>
    <li class="list"></li>
    <li class="list"></li>
    <li class="list"></li>
</ul>

 

만약 모든 li 요소마다 접근해 내부에 'li는 리스트입니다.'라고 작성하고 싶을 경우

querySelector처럼 통째로 하나의 엘리먼트로 접근하듯 한다면 적용되지 않는다.

 

querySelectorAll의 경우 "nodeList" 배열의 형태로 가져오기 때문에 

forEach()나 for문과 같이 배열의 요소 하나씩 접근해야 한다.

 

const list = document.querySelectorAll(".list");

// (x)
list.innerHTML = "li는 list 입니다."; 

//(o)
list.forEach((el) => el.innderHTML = "li는 list 입니다.";); 

for(let i=0; i < list.length; i++) { 
   list[i].innerHTML = "querySelectorAll의 리턴 타입은 nodeList!";
}

 

그렇다면, li의 두 번째 요소에만 적용하고 싶을 때는?

list[1].innerHTML = "";

 

---

Document - Web API | MDN

 

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️

***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***