Language/JavaScript
[JavaScript] document.getElementsByClassName() - 특정 class를 가지고 있는 dom 요소들을 찾기/가져오기 (ft. element.getElementsByClassName())
썸머워즈
2022. 2. 24. 21:27
반응형
javascript로 dom 요소를 제어할때 사용되는 메서드중 하나인 document.getElementByClassName()에 대해 알아보자.
메서드명 그 의미를 그대로 가지고 있어, 특정 class를 가지고 있는 모든 dom 요소에 접근하기 위한 메서드이다.
지금까지 그냥 아무생각없이 사용해왔는데, 한번 공부할 겸 정리하고자 한다.
▷ 구문
document.getElementsByClassName(names)
names : 찾으려는 요소 클래스를 의미하며, 대소문자를 구분하는 문자열을 사용한다.(여러 클래스 이름은 공백으로 구분된다.)
▷ 예제 1) document.getElementsByClassName() 사용법
<!doctype html>
<html lang="ko">
<head>
<script src="./test.js"></script>
<title>mineItRecord</title>
</head>
<body>
<div class="dv">div-1</div>
<div class="dv">div_2</div>
<div class="dv wrap">
<span class="sp">sp1</span>
</div>
<div id="wrap" class="wrap">
<span class="sp">sp2</span>
</div>
</body>
</html>// 기본 사용법
document.getElementsByClassName('dv') // HTMLCollection(3) [div.dv, div.dv, div.dv.wrap]
document.getElementsByClassName('dv wrap') // HTMLCollection [div.dv.wrap]
document.getElementsByClassName('wrap')
// HTMLCollection(2) [div.dv.wrap, div#wrap.wrap, wrap: div#wrap.wrap]
// element.getElementsByClassName
// 특정 dom 요소를 기준으로 그 안에서 클래스이름으로 검색
document.getElementById('wrap').getElementsByClassName('sp'); // HTMLCollection [span.sp]
// 특정 클래스를 가진 dom 요소 중 특정 id를 가진 요소 검색
document.getElementsByClassName('wrap').wrap // <div id="wrap" class="wrap">...</div>
getElementsByClassName()은 document를 대상으로 사용할 수 있지만, 특정 element를 기준으로도 사용할 수 있다.
그리고 여러 클래스를 동시에 가진 요소를 찾고자 한다면 공백을 기준으로 클래스를 나열하면 된다.
참고 : https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Document.getElementsByClassName() - Web APIs | MDN
The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s).
developer.mozilla.org
반응형