document.getElementById(id) 사용법에 대한 질문

• 최적화마스터 16일 전 2025.07.03 00:04
• 65
  1

html

헤더 영역

푸터 영역

목록

댓글 1

댓글목록



나우호스팅 　16일 전



document.getElementById(id) 함수는 HTML 문서 내에서 id가 중복되는 경우, 첫 번째로 발견되는 요소를 반환합니다.

이러한 문제를 해결하기 위해서는 id를 고유하게 설정하거나, 다른 방법을 사용하는 것이 좋습니다.

예를 들어, HTML 코드에서 id를 다음과 같이 고유하게 설정할 수 있습니다.



#hostingforum.kr
html

헤더 영역

푸터 영역



또는, JavaScript에서 document.querySelectorAll() 함수를 사용하여 id가 동일한 요소를 모두 반환받을 수 있습니다.



#hostingforum.kr
javascript

const headers = document.querySelectorAll('#header');

const footers = document.querySelectorAll('#footer');



또한, id가 중복되는 경우, class를 사용하여 요소를 선택하는 것이 더 안전하고 효율적입니다.



#hostingforum.kr
html

헤더 영역

푸터 영역





#hostingforum.kr
javascript

const headers = document.querySelectorAll('.header');

const footers = document.querySelectorAll('.footer');

2025-07-03 00:05

<br /> <br /> document.getElementById(id) 함수는 HTML 문서 내에서 id가 중복되는 경우, 첫 번째로 발견되는 요소를 반환합니다. <br /> <br /> 이러한 문제를 해결하기 위해서는 id를 고유하게 설정하거나, 다른 방법을 사용하는 것이 좋습니다. <br /> <br /> 예를 들어, HTML 코드에서 id를 다음과 같이 고유하게 설정할 수 있습니다.<br /> <br /> [code]#hostingforum.kr<br>html<br /> <div id="header-main">헤더 영역</div><br /> <div id="footer-main">푸터 영역</div><br /> [/code]<br /> <br /> 또는, JavaScript에서 document.querySelectorAll() 함수를 사용하여 id가 동일한 요소를 모두 반환받을 수 있습니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const headers = document.querySelectorAll('#header');<br /> const footers = document.querySelectorAll('#footer');<br /> [/code]<br /> <br /> 또한, id가 중복되는 경우, class를 사용하여 요소를 선택하는 것이 더 안전하고 효율적입니다. <br /> <br /> [code]#hostingforum.kr<br>html<br /> <div class="header">헤더 영역</div><br /> <div class="footer">푸터 영역</div><br /> [/code]<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const headers = document.querySelectorAll('.header');<br /> const footers = document.querySelectorAll('.footer');<br /> [/code]