[JS] getElementsByTagName, querySelectorAll

▷ 다음과 같은 HTML 문서가 있다고 가정해 보자.

<ul id="myList">
  <li>사과</li>
  <li>바나나</li>
  <li>딸기</li>
</ul>

 

▶ getElementsByTagName

• 특정 태그 이름을 가진 요소를 선택하는 간단하고 유용한 메서드
• 하지만, 'HTMLCollection'은 실시간으로 업데이트 되지 않으므로, 나중에 추가된 요소를 포함하려면 다시 메서드를 호출해야 함.

const listItems = document.getElementsByTagName('li');
console.log(listItems);

→ 'li' 태그를 가진 모든 요소가 반환되는데, 이를 'HTMLCollection'으로 나타낸다. 

→ 여기서 "HTMLCollection'은 배열 유사 객체이고 배열과 유사한 방식으로 요소에 접근할 수 있다.

 

console.log(listItems[0].textContent); // 출력: "사과"

→ 첫 번째'li' 요소의 텍스트 내용을 출력하려면 위와 같이 하면 된다.

 

for (let i = 0; i < listItems.length; i++) {
  console.log(listItems[i].textContent);
}

→ for 반복문을 사용하여 모든 'li' 요소의 텍스트 내용을 반복적으로 출력할 수 있다.

 

 

▶ querySelectorAll

• DOM 선택 메서드이고, 강력하고 유연하다. 
  • css 선택자 사용, 다중 선택, 유연한 선택 옵션, 더 정확한 선택, 호환성
• css 선택자를 사용하여 요소를 선택할 수 있고, 선택한 요소를 'NodeList'로 반환한다.
• 때문에, 더 복잡한 선택 기준에 따라 요소를 선택할 수 있다. 

// querySelectorAll을 사용하여 클래스가 "red-box"인 모든 div 요소를 선택하려면 다음과 같이 할 수 있다
// querySelectorAll은 반환된 NodeList를 통해 선택한 요소에 반복적으로 접근할 수 있다.
const redBoxes = document.querySelectorAll('div.red-box');
console.log(redBoxes);