본문으로 건너뛰기
실습하기

HTML 요소 선택법 - 2

getElementsByClassName​

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

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

동일한 class를 가진 여러 HTML 요소
<div class="highlighted">div 요소</div>

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

<span class="highlighted">span 요소</span>
JavaScript: class가 'highlighted'인 모든 요소 선택
const highlightedElements = document.getElementsByClassName('highlighted');

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

querySelectorAll​

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

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

HTML: 다양한 클래스를 가진 HTML 요소들
<div class="box red">빨간색 박스</div>
<p class="text blue">파란색 텍스트</p>
<span class="highlight red">빨간색 강조 텍스트</span>
JavaScript: class가 'red'인 모든 요소 선택하기
const redElements = document.querySelectorAll('.red');

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

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!