HTML 요소 선택법 - 2

document.getElementsByClassName()는 HTML에서 특정 class 속성을 가진 모든 요소들을 선택하는 메서드입니다.

상점에서 특정 브랜드의 상품을 모두 찾고 싶다고 생각해 보세요. class는 그 브랜드와 같아서, 같은 스타일이나 기능을 가진 여러 요소들을 그룹화하는 데 사용됩니다.

Copy
<div class="highlighted">div 요소</div>

<p class="highlighted">p 요소</p>

<span class="highlighted">span 요소</span>

Copy
const highlightedElements = document.getElementsByClassName('highlighted');

for (let elem of highlightedElements) {
  elem.style.backgroundColor = 'yellow'; // 강조된 요소의 배경색을 노란색으로 변경
}

document.querySelectorAll()는 CSS 선택자를 활용해 웹 페이지의 하나 또는 여러 요소를 선택하는 메서드입니다.

querySelectorAll은 여러 조건을 동시에 지정해서 원하는 요소들을 정확하게 선택할 수 있습니다.

Copy
<div class="box red">빨간색 박스</div>
<p class="text blue">파란색 텍스트</p>
<span class="highlight red">빨간색 강조 텍스트</span>

Copy
const redElements = document.querySelectorAll('.red');

for (let elem of redElements) {
  elem.style.border = '2px solid red'; // 빨간색 테두리 추가
}