[JavaScript] querySelector()와 querySelectorAll()

querySelector()

document.querySelector('li')와 같이 노드를 선택할 수 있다. ()안에는 유효한 CSS 선택자를 작성하면 된다.

단, 선택한 요소가 여러개일 경우, 첫번째 노드만 반환해준다.

 

querySelectorAll()

해당하는 모든 요소 노드를 배열 형태로 반환해준다. 그렇다고 배열은 ❌❌❌

배열은 아니지만 querySelectorAll()은 for of문과 forEach()를 사용할 수 있게 만들어진 메소드다.

<ul>
  <li>코코몽</li>
  <li>코코몽</li>
  <li>코코몽</li>
  <li>코코몽</li>
  <li>코코몽</li>
</ul>

// querySelectorAll() 해당하는 모든 요소 노드를 배열 형태로 반환해준다.
// 그렇다고 배열은 ❌❌❌
// 반복문을 통해 코코몽 옆에 귀여워와 🥰, ❤️를 넣어보자.
const liEls = document.querySelectorAll('li');

// querySelectorAll()는 for of 와 forEach()를 사용할 수 있다.
// for of
for (let item of liEls) {
item.textContent += '귀여워';
}

// forEach()
liEls.forEach((item) => {
item.textContent += '🥰';
});

// for
for (let i = 0; i < liEls.length; i++) {
liEls[i].textContent += '❤️';
}