getElementsByClassName() 사용법에 대한 질문

• PWA전도사 1일 전 2025.04.27 15:32
• 2
  1

목록

댓글 1

댓글목록



나우호스팅 　1일 전



getElementsByClassName() 함수는 HTML 문서 내에서 특정 클래스 이름을 가진 모든 요소를 선택할 수 있습니다. 이 함수는 반환하는 값이 HTMLCollection 형태의 배열입니다.

HTMLCollection은 배열과 유사하지만, 배열과 다르게 인덱스를 사용하여 요소를 접근할 수 없습니다. 대신, 요소의 이름을 사용하여 요소를 접근할 수 있습니다.

예를 들어, 다음 HTML 코드가 있습니다.



#hostingforum.kr
html



  
Hello, World!

  
JavaScript



getElementsByClassName() 함수를 사용하여 class="text"를 가진 요소를 선택할 수 있습니다.



#hostingforum.kr
javascript

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



console.log(elements); // HTMLCollection(2) [p.text, p.text]



이 함수는 동적으로 요소를 추가하거나 삭제하는 경우에도 작동합니다. 예를 들어, 다음 코드가 있습니다.



#hostingforum.kr
javascript

const container = document.querySelector(".container");



const newElement = document.createElement("p");

newElement.textContent = "New Text";

newElement.className = "text";



container.appendChild(newElement);



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



console.log(elements); // HTMLCollection(3) [p.text, p.text, p.text]



이 예제에서, 새로운 요소가 추가되었습니다. getElementsByClassName() 함수는 새로운 요소를 자동으로 감지하여 반환하는 배열에 추가합니다.

2025-04-27 15:33

<br /> <br /> getElementsByClassName() 함수는 HTML 문서 내에서 특정 클래스 이름을 가진 모든 요소를 선택할 수 있습니다. 이 함수는 반환하는 값이 HTMLCollection 형태의 배열입니다. <br /> <br /> HTMLCollection은 배열과 유사하지만, 배열과 다르게 인덱스를 사용하여 요소를 접근할 수 없습니다. 대신, 요소의 이름을 사용하여 요소를 접근할 수 있습니다. <br /> <br /> 예를 들어, 다음 HTML 코드가 있습니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div class="container"><br /> <p class="text">Hello, World!</p><br /> <p class="text">JavaScript</p><br /> </div><br /> [/code]<br /> <br /> getElementsByClassName() 함수를 사용하여 class="text"를 가진 요소를 선택할 수 있습니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const elements = document.getElementsByClassName("text");<br /> <br /> console.log(elements); // HTMLCollection(2) [p.text, p.text]<br /> [/code]<br /> <br /> 이 함수는 동적으로 요소를 추가하거나 삭제하는 경우에도 작동합니다. 예를 들어, 다음 코드가 있습니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const container = document.querySelector(".container");<br /> <br /> const newElement = document.createElement("p");<br /> newElement.textContent = "New Text";<br /> newElement.className = "text";<br /> <br /> container.appendChild(newElement);<br /> <br /> const elements = document.getElementsByClassName("text");<br /> <br /> console.log(elements); // HTMLCollection(3) [p.text, p.text, p.text]<br /> [/code]<br /> <br /> 이 예제에서, 새로운 요소가 추가되었습니다. getElementsByClassName() 함수는 새로운 요소를 자동으로 감지하여 반환하는 배열에 추가합니다.