getElementsByTagName 자바스크립트 태그로 요소 찾기

by

원본: https://www.scaler.com/topics/javascript-getelementsbytagname/

document 객체 또는 DOM 요소에는 getElementsByTagName() 이라는 메소드가 있습니다. 이는 document의 지정된 태그 이름을 가진 모든 요소의 컬렉션을 리턴합니다.

getElementsByTagName 문법

다음은 document.getElementsByTagName() 메소드의 문법입니다:

const elements = document.getElementsByTagName(tagName);

위의 구문에서

  • tagName은 요소의 태그 이름을 나타냅니다.
  • elements에는 지정된 태그 이름으로 검색된 모든 요소의 목록을 가집니다.

이 메소드는 라이브 컬렉션을 리턴합니다. 즉 검색한 태그 이름을 가진 요소가 페이지에 추가되거나 제거될 때 마다 자동으로 업데이트 됩니다.

매개변수

  • 이는 필수 매개변수로 찾으려 하는 HTML 요소의 태그 이름을 받습니다.
  • 매개변수로 특수 문자열인 *(애스터리스크)를 전달하면 document의 모든 요소를 컬렉션에 넣어서 리턴하게 됩니다.

리턴 값

  • 이 함수는 찾은 모든 HTML 요소를 포함하는 배열인 라이브 HTMLCollection을 리턴합니다.
  • 요소는 document에 나열된 순서대로 리턴 배열에 저장됩니다.
  • 리턴된 배열에 접근하려면 간단히 인덱스를 사용할 수 있습니다.

getElementsByTagName 예제

다음의 HTML 코드를 보겠습니다:

<!DOCTYPE html>
<html>

<body>
  <h1>자바스크립트</h1>
  <p style="display: none;"><b>DOM getElementsByTagName()</b></p>
  <p style="display: none;">이제 보이나요?</p>

  <button onclick="fun()">클릭</button>

  <script>
    function fun() {
      const elements = document.getElementsByTagName("p");
      elements[0].style.display = "block";
      elements[1].style.display = "block";
    }
  </script>
</body>

</html>

위의 예제 코드를 실행하면 다음과 같은 화면을 볼 수 있습니다:

getElementsByTagName 예제 초기화면

여기서 버튼을 클릭하면 다음과 같은 결과가 나타납니다:

getElementsByTagName 예제

코드 설명

  1. 먼저, HTML에서 <p> 요소를 추가한 다음 스타일의 display 속성을 none으로 설정하여 화면에서 안보이도록 합니다.
  2. <button> 요소를 클릭하면 fun() 함수를 실행하도록 onclick 이벤트에 등록합니다.
  3. fun() 함수에서는 getElementsByTagName() 메소드를 사용하여 모든 <p> 요소를 검색한 다음 컬렉션을 elements 변수에 저장합니다.
  4. 배열의 요소를 인덱스를 통해 가져온 다음 스타일의 display 속성을 block으로 설정하여 화면에 보이게 합니다.

getElementsByTagName 작동 방법

이 메소드가 호출되면 지정한 부모 요소부터 시작하여 자식 요소들을 재귀적으로 검색하여 태그 이름과 매개변수가 일치하는 요소를 모두 가져옵니다.

이 메소드는 루트 노드와 모든 하위 요소를 검색합니다. 그 다음 해당 태그를 가진 요소를 DOM에 나열된 순서대로 라이브 HTMLCollection에 저장합니다.

리턴된 HTMLCollection은 라이브 상태입니다. 즉, DOM 트리와 동기화되서 목록이 필요할 때 다시 메소드를 호출할 필요 없이 자동으로 업데이트 됩니다.

예외

이 메소드는 DOM을 검색하기 전에 매개변수로 받은 태그 이름을 소문자로 변환합니다.

따라서 HTML 문서에서 camelCase SVG 컴포넌트(예: <redialGradient>)를 찾으려고하면 올바른 결과를 내지 않습니다.

이런 상황에서는 태그 이름의 대문자를 유지하는 document.getElementsByTagNameNS() 메소드를 사용해야 정확한 결과를 낼 수 있습니다.

정리

  • getElementsByTagName() 메소드는 자바스크립트의 빌트인 메소드입니다.
  • 이 메소드는 element나 document 객체의 메소드입니다.
  • 매개변수로 태그 이름을 받고 해당 태그를 가지는 요소의 목록을 리턴합니다.
  • 리턴 값의 타입은 요소의 라이브 HTMLCollection으로 이는 array-like 객체입니다.
  • 리턴된 목록의 모든 요소에 접근하려면 일반 배열 처럼 forEach() 메소드나 for 루프를 사용할 수 있습니다.

관련 글