getElementsByTagName()

getElementsByTagName() 함수는
주어진 요소의 태그 이름에 해당하는 모든 요소를 HTMLCollection 객체로 반환합니다.
일치하는 요소가 없으면 빈 HTMLCollection 객체를 반환합니다.

HTML 태그 소개

반환되는 HTMLCollection 객체를 순회해서 각 요소에 대해 특정 작업을 수행할 수 있습니다.

HTMLCollection은
웹 페이지의 HTML 문서 내에서 선택한 요소만을 문서 내 정렬된 순서대로 모아둔 집합입니다.
흔히 DOM 컬렉션이라 말하는 이 집합은 요소를 배열의 항목처럼 유사하게 다룰 수 있으며, 웹 페이지의 요소를 쉽게 조작할 수 있게 하는 객체입니다.

자바스크립트 HTMLCollection

HTMLCollection은 유사 배열 객체이면서, for...of 문으로 순회 가능한 이터러블(iterable) 객체입니다.
그리고, DOM의 변경 사항을 실시간(또는 live)으로 반영하는 객체입니다.
length 속성으로 유사 배열 객체인 HTMLCollection의 길이를 반환할 수 있습니다.

예제

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByTagName()</title>
    </head>
    <body>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script src="tag-name.js"></script>
    </body>
</html>
tag-name.js 
const liElements = document.getElementsByTagName("li"); // li 태그를 모두 선택
console.log(liElements); // HTMLCollection(3) [li, li, li]

/* 방법 1 - for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 2 - for 문 적용 */
for (let i = 0; i < liElements.length; i++) { // length 속성 사용 가능
    console.log(liElements[i].textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3_1 - forEach() 함수 적용 */
const arr = [...liElements]; // 스프레드 문법으로 배열 개체를 만듦
arr.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3_2 - forEach() 함수 적용 */
const liElementsArray = Array.from(liElements); // Array.from() 메서드로 배열 개체를 만듦
liElementsArray.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

getElementsByTagName() 함수가 반환하는 HTMLCollection은 배열이 아니기 때문에 forEach() 함수를 바로 사용할 수 없습니다. HTMLCollection은 배열과 유사하지만, 실제 배열이 아니므로 배열 메서드를 지원하지 않습니다. 하지만, Array.from() 또는 스프레드(...) 문법을 사용해 배열로 변환하면 forEach()를 사용할 수 있습니다.

코드 부연설명
forEach() 함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수입니다.

코드 부연설명
for 문은 특정 횟수나 범위만큼 반복하는 문입니다.

코드 부연설명
textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

구문

JavaScript 
// HTML 문서 전체에서
document.getElementsByTagName(name)

// 특정 요소 내에서
element.getElementsByTagName(name)

매개변수

getElementsByTagName() 함수의 매개변수
name 찾으려는 요소의 태그 이름에 해당하는 모든 요소입니다. 이 값은 대소문자를 구분하지 않는 문자열입니다.
특수문자 "*"는 모든 요소를 나타냅니다.

반환 값

  • HTML 문서 내에서 주어진 요소의 태그 이름에 해당하는 모든 요소를 HTMLCollection 객체로 반환합니다.
  • 일치하는 요소가 없으면 빈 HTMLCollection 객체를 반환합니다.

반환 값 예시

매개변수의 값이 특수문자 "*"인 경우

매개변수의 값이 특수문자 "*"인 경우에는 모든 요소를 반환합니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByTagName("*")</title>
    </head>
    <body>
        <h1>getElementsByTagName("*")</h1>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script>
            const allElements = document.getElementsByTagName("*");
            console.log(allElements);
            // HTMLCollection(10) [html, head, meta, title, body, ul, li, li, li, script]
        </script>
    </body>
</html>
일치하는 요소의 n 번째 요소를 다루려면

일치하는 요소의 n 번째 요소를 다루려면 다음과 같이 할 수 있습니다.

JavaScript 
getElementsByTagName(name)[n]

getElementsByTagName() 함수는 유사 배열인 HTMLCollection 객체를 반환하는데, 배열처럼 인덱스로 접근할 수 있습니다.

다음은 HTML 문서 내의 <li> 태그의 첫 번째 요소를 다루는 예시입니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByTagName()[n]</title>
    </head>
    <body>
        <h1>getElementsByTagName()[n]</h1>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script>
            const liElements = document.getElementsByTagName("li"); // li 태그를 모두 선택
            
            /* HTML 문서 내의 <li> 태그의 첫 번째 요소 */
            console.log(liElements[0].textContent); // 0부터 시작하는 인덱스로 접근
            // 출력: "김밥"
        </script>
    </body>
</html>
일치하는 요소의 개수 확인하기

일치하는 요소의 개수는 length 속성으로 쉽게 확인할 수 있습니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByTagName().length</title>
    </head>
    <body>
        <h1>getElementsByTagName().length</h1>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script>
            const liElements = document.getElementsByTagName("li"); // li 태그를 모두 선택
            console.log(liElements.length); // 3
        </script>
    </body>
</html>
특정 요소 내에서 요소 찾기

getElementById() 함수는 오직 document 객체에서만 사용하는 메서드이지만,
getElementsByTagName() 함수는 특정 요소 객체 내에서도 사용할 수 있는 메서드입니다.

자바스크립트 getElementById()

다음은 id 속성의 값이 "cn-food"인 요소 내에서 모든 <li> 태그를 찾는 예시입니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>element.getElementsByTagName()</title>
    </head>
    <body>
        <h1>element.getElementsByTagName()</h1>
        <h2>분식점 메뉴</h2>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <h2>중국집 메뉴</h2>
        <div id="cn-food">
            <ul>
                <li>짜장면</li>
                <li>짬뽕</li>
                <li>탕수육</li>
            </ul>
        </div>
        <script>
            const cnFood = document.getElementById("cn-food");

            // id가 "cn-food"인 요소 내에서 li 태그를 모두 선택
            const cnFoodLiElements = cnFood.getElementsByTagName("li");
            
            // 찾은 모든 요소 중에서 첫 번째 요소의 텍스트 콘텐트 출력
            console.log(cnFoodLiElements[0].textContent); // "짜장면"
        </script>
    </body>
</html>

명세서

getElementsByTagName() 함수의 명세서 사양
명세서 사양
document.getElementsByTagName() DOM Standard
#ref-for-dom-document-getelementsbytagname①
element.getElementsByTagName() DOM Standard
#dom-element-getelementsbytagname

브라우저 호환성

getElementsByTagName() 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
getElementsByTagName() 1 12 1 1

참고문헌

같이 보기