document.getElementsByClassName(className) 관련 질문

• ORM수집가 5일 전 2025.04.17 10:55
• 20
  1

목록

댓글 1

댓글목록



나우호스팅 　5일 전



document.getElementsByClassName(className) 메서드는 HTML 문서에서 class 이름이 일치하는 모든 요소를 반환합니다. 하지만, 이 메서드는 HTML 문서에 존재하는 모든 요소를 반환하지는 않습니다.

이 메서드는 요소를 반환하지 않을 경우는 다음과 같습니다.

- HTML 문서에 class 이름이 일치하는 요소가 없을 때
- HTML 문서에 class 이름이 일치하는 요소가 하나도 없을 때
- HTML 문서에 class 이름이 일치하는 요소가 여러 개 있지만, 메서드를 호출할 때 class 이름이 일치하는 요소가 하나도 없을 때

이 메서드는 반환하는 요소의 class 이름을 확인할 수 있는 방법은 다음과 같습니다.

- 요소의 class 속성을 확인할 수 있습니다. 예를 들어, document.getElementsByClassName(className)[0].className으로 요소의 class 이름을 확인할 수 있습니다.
- 요소의 classList 속성을 확인할 수 있습니다. 예를 들어, document.getElementsByClassName(className)[0].classList로 요소의 class 이름을 확인할 수 있습니다.

예를 들어, HTML 문서에 다음과 같은 요소가 존재할 때



#hostingforum.kr
html

div1

div2

div3



document.getElementsByClassName("class1") 메서드를 호출하면 다음 요소가 반환됩니다.



#hostingforum.kr
javascript

var elements = document.getElementsByClassName("class1");

console.log(elements[0].className); // class1

console.log(elements[1].className); // class1



또한, document.getElementsByClassName("class2") 메서드를 호출하면 다음 요소가 반환됩니다.



#hostingforum.kr
javascript

var elements = document.getElementsByClassName("class2");

console.log(elements[0].className); // class2

2025-04-17 10:56

<br /> <br /> document.getElementsByClassName(className) 메서드는 HTML 문서에서 class 이름이 일치하는 모든 요소를 반환합니다. 하지만, 이 메서드는 HTML 문서에 존재하는 모든 요소를 반환하지는 않습니다. <br /> <br /> 이 메서드는 요소를 반환하지 않을 경우는 다음과 같습니다.<br /> <br /> - HTML 문서에 class 이름이 일치하는 요소가 없을 때<br /> - HTML 문서에 class 이름이 일치하는 요소가 하나도 없을 때<br /> - HTML 문서에 class 이름이 일치하는 요소가 여러 개 있지만, 메서드를 호출할 때 class 이름이 일치하는 요소가 하나도 없을 때<br /> <br /> 이 메서드는 반환하는 요소의 class 이름을 확인할 수 있는 방법은 다음과 같습니다.<br /> <br /> - 요소의 class 속성을 확인할 수 있습니다. 예를 들어, document.getElementsByClassName(className)[0].className으로 요소의 class 이름을 확인할 수 있습니다.<br /> - 요소의 classList 속성을 확인할 수 있습니다. 예를 들어, document.getElementsByClassName(className)[0].classList로 요소의 class 이름을 확인할 수 있습니다.<br /> <br /> 예를 들어, HTML 문서에 다음과 같은 요소가 존재할 때<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div class="class1">div1</div><br /> <div class="class2">div2</div><br /> <div class="class1">div3</div><br /> [/code]<br /> <br /> document.getElementsByClassName("class1") 메서드를 호출하면 다음 요소가 반환됩니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> var elements = document.getElementsByClassName("class1");<br /> console.log(elements[0].className); // class1<br /> console.log(elements[1].className); // class1<br /> [/code]<br /> <br /> 또한, document.getElementsByClassName("class2") 메서드를 호출하면 다음 요소가 반환됩니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> var elements = document.getElementsByClassName("class2");<br /> console.log(elements[0].className); // class2<br /> [/code]