IT 성장일기

[Javascript] 자바스크립트에서 DOM 요소를 선택하는 여러 가지 방법 -1- 본문

Script/Javascript

[Javascript] 자바스크립트에서 DOM 요소를 선택하는 여러 가지 방법 -1-

고 양 2025. 6. 16. 19:30
반응형
자바스크립트에서 DOM 요소를 선택하는 여러 가지 방법

자바스크립트를 이용해 특정 요소를(또는 요소들을) 가져오는 방법을 정리해 보겠습니다.

다양한 예제를 적어두고 지능이 퇴행되기 시작하면 종종 꺼내 읽도록 하겠습니다.

getElementById('id')

매개변수로 받은 문자열을 id 속성으로 갖는 요소를 반환합니다.

하나의 dom에서 id 속성은 유일해야 하기 때문에 당연하게도 반환되는 요소의 개수는 1개입니다.

<div id="fruits">
    <div id="apple"></div>
    <p id="pineapple"></p>
</div>

const fruitContainer = document.getElementById('fruits');
const appleDiv = document.getElementById('apple');
const pineapplePane = fruitContainer.getElementById('pineapple');

getElementsByClassName('className')

매개변수로 받은 문자열을 class 속성으로 갖는 모든 요소를 반환합니다.

반환되는 타입은 HTML Collection입니다.

<div class="message">안녕하세요</div>
<div class="message">환영합니다</div>
<div class="message">좋은 하루 되세요</div>

<script>
  const messages = document.getElementsByClassName("message");

  for (let i = 0; i < messages.length; i++) {
    messages[i].textContent = `메시지 ${i + 1}`;
  }
</script>

getElementsByTagName('tagName')

매개변수로 받은 문자열에 해당하는 HTML 요소를 반환합니다

자주 사용되지는 않지만 <li>나 <div>등 반복적으로 사용되는 경우가 많은 요소를 한 번에 가져올 때 매우 유용합니다!

 

반환되는 타입은 HTML Collection입니다.

<!DOCTYPE html>
<html>
<body>

<p>첫 번째 문장입니다.</p>
<p>두 번째 문장입니다.</p>
<p>세 번째 문장입니다.</p>

<script>
  const paragraphs = document.getElementsByTagName("p");

  for (let i = 0; i < paragraphs.length; i++) {
    console.log("문장 " + (i + 1) + ": " + paragraphs[i].textContent);
  }
</script>

</body>
</html>
<ul id="fruits">
  <li>사과</li>
  <li>바나나</li>
  <li>포도</li>
</ul>

<script>
  const items = document.getElementsByTagName("li");

  for (let i = 0; i < items.length; i++) {
    console.log(`과일 ${i + 1}: ${items[i].textContent}`);
  }
</script>

getElementsByName('name')

매개변수로 받은 문자열을 name 속성으로 가지는 요소를 반환합니다.

<form> 내부의 여러 <input> 요소들과 같이 name 속성을 지정하는 일이 빈번한 경우에 유용합니다.

 

반환되는 타입은 NodeList입니다.

<form id="survey-form">
  <p>당신의 연령대를 알려주세요.</p>
  <label><input type="radio" name="ageGroup" value="10s"> 10대</label><br>
  <label><input type="radio" name="ageGroup" value="20s"> 20대</label><br>
  <label><input type="radio" name="ageGroup" value="30s"> 30대</label><br>
  <label><input type="radio" name="ageGroup" value="40s"> 40대 이상</label><br>

  <button type="button" onclick="checkSelectedAge()">제출하기</button>
</form>

<script>
function checkSelectedAge() {
  const radios = document.getElementsByName("ageGroup");
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      alert("선택한 연령대: " + radios[i].value);
      return;
    }
  }
  alert("연령대를 선택해주세요.");
}
</script>

마치며

자바스크립트를 처음 접했을 때 요소를 가져오는 방법들이 너무 헷갈려서 고통받았던 올챙이 기억이 남아있습니다.

요즘은 지피티가 웬만하면 다 해주기 때문에 굳이 따로 정리하거나 배우는 게 유의미한가.. 싶기는 하지만

이 글이 누군가에게는 도움이 되었으면 좋겠습니다.

 

감사합니다!

반응형
저작자표시 비영리 변경금지 (새창열림)

'Script > Javascript' 카테고리의 다른 글

[Javascript] 자바스크립트에서 DOM 요소를 선택하는 여러 가지 방법 -2-  (3) 2025.06.16
[Javascript] 요소에 이벤트 핸들러를 등록하는 여러 가지 방법  (2) 2025.05.07
[Javascript] 한글 마지막 글자의 받침 유무 판단하기  (2) 2025.03.18
[Javascript] 매핑 객체 패턴으로 분기문 깔끔하게 사용하기 (Mapping Object Pattern)  (0) 2024.12.24
[Javascript] Set, map, filter로 배열의 차집합 구하기  (0) 2024.12.13
'Script/Javascript' Related Articles more