getElementsByClassName

Coddy의 JavaScript DOM 메서드 코스 레슨 — 13개 중 5번째.

getElementsByClassName() 함수는 일치하는 클래스 속성을 가진 모든 요소의 배열을 반환하며, 동일한 스타일이나 동작을 공유하는 여러 요소를 선택할 때 유용합니다. 예를 들어:

const elements = document.getElementsByClassName("className");

위 코드는 클래스가 className인 요소들을 가져와서 elements라는 변수에 저장합니다.

유사한 모든 요소의 속성을 변경하려면 이 변수를 반복하여 처리해야 합니다. 예를 들어:

for (const element of elements) {
	className.style.color = "blue";
	className.style.fontWeight = "bolder";
}

챌린지

쉬움

클래스 이름이 highlight인 단락들을 포함하는 HTML 코드가 주어집니다.

JavaScript만을 사용하여, 텍스트의 색상과 글꼴 두께를 변경하세요:

getElementsByClassName() 함수를 사용하여 요소들을 가져옵니다.
for 루프를 사용하여 가져온 요소 변수를 반복합니다.
style 속성을 사용하여 배열의 모든 요소에 대해 color를 “orange”로, fontWeight를 “bold”로 수정합니다.

변경 사항을 확인하려면 웹 페이지를 새로고침해야 합니다:

직접 해보기

<!DOCTYPE html>
<html>
    <body>
        <p class="highlight">Text 1</p>
        <p class="highlight">Text 2</p>
        <script src="script.js"></script>
    </body>
</html>

JavaScript DOM 메서드의 모든 레슨

1소개

소개 Document Object Model

2DOM 메서드 I

getElementById 요소 스타일 수정하기getElementsByClassName반복문을 통한 순회 및 조작 getElementsByTagName querySelector

3DOM 메서드 II

querySelectorAll addEventListener innerHTML createElement 및 appendChild classList 토글