HTML DOM Document getElementsByTagName() 메서드

정의와 사용법

getElementsByTagName() 메서드는 지정된 태그 이름을 가진 모든 요소의 셋을 반환합니다。

getElementsByTagName() 메서드는 HTMLCollection.

getElementsByTagName() 속성은 읽기 전용입니다。

주의사항：getElementsByTagName("*") 문서 중 모든 요소를 반환합니다。

HTMLCollection

HTMLCollection HTML 요소의 배열과 유사한 셋입니다（리스트）。

콜렉션에서 요소에 인덱싱을 통해 접근할 수 있습니다（0부터 시작）。

length 속성은 셋팅할 수 없는 것입니다.

자세히 보기：

getElementById() 메서드

getElementsByClassName() 메서드

querySelector() 메서드

querySelectorAll() 메서드

HTMLCollection 객체

예제

예제 1

"li" 태그를 가진 모든 요소를 가져옵니다：

const collection = document.getElementsByTagName("li");

직접 시도해보세요

예제 2

문서 중 모든 요소를 가져옵니다：

const collection = document.getElementsByTagName("*");

직접 시도해보세요

예제 3

문서 중 첫 번째 <p> 요소의 내부 HTML을 변경합니다：

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

직접 시도해보세요

예제 4

문서 중 <li> 요소의 수：

let numb = document.getElementsByTagName("li").length;

직접 시도해보세요

예제 5

모든 <p> 요소의 배경색을 변경합니다：

const collection = document.getElementsByTagName("P");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

직접 시도해보세요

문법

document.getElementsByTagName(tagName)

매개변수

매개변수 설명
tagName 필수. 요소의 태그 이름.

반환 값

타입 설명
객체

HTMLCollection 객체.

지정된 태그 이름을 가진 요소의 집합.

요소가 문서에서 등장한 순서에 따라 정렬됩니다.

기술 세부 사항

이 메서드는 NodeList 객체를 반환합니다. (읽기 전용 배열로 처리할 수 있습니다) 이 객체는 문서에 특정 태그 이름을 가진 모든 Element 요소를 저장하며, 이 요소들은 원본 문서에서 등장한 순서와 같은 순서로 저장됩니다.

NodeList 객체는 '살아있는' 객체입니다. 즉, 문서에 특정 태그 이름을 가진 요소를 추가하거나 제거하면 자동으로 필요한 업데이트가 이루어집니다.

HTML 문서는 대소문자를 구분하지 않기 때문에 어떤 대소문자 형식을 사용하든지 가능합니다. tagName이는 문서 중 모든同名 태그와 일치하며, 이 태그가 원본 문서에서 어떤 대소문자 형식을 사용했는지에 관계없습니다. 하지만 XML 문서는 대소문자를 구분합니다.tagName 원본 문서에서 이름과 대소문자 형식이 완전히 일치하는 태그와 일치합니다.

ヒント:Element 인터페이스는 동일한 이름의 메서드를 정의하며, 이 메서드는 문서의 서브 트리에서만 검색합니다. 또한, HTMLDocument 인터페이스는 다음을 정의합니다: getElementByName() 메서드이는 name 속성의 값에 기반하여 요소를 검색합니다. (태그 이름이 아닌 경우)

브라우저 지원

document.getElementsByTagName() DOM Level 1 (1998) 기능입니다.

모든 브라우저에서 지원됩니다:

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원

관련 페이지

JavaScript 참조 가이드:element.getElementsByTagName()

JavaScript 교육:JavaScript HTML DOM 노드 목록