HTML DOM Element getElementsByTagName() 메서드

정의와 사용법

getElementsByTagName() 메서드는 지정된 태그 이름을 가진 요소의 자식 요소 집합을 NodeList 객체로 반환합니다.

힌트:파라미터 값 "*" 모든 자식 요소를 반환합니다。

자세히 보기:

getElementsByClassName() 메서드

querySelector() 메서드

querySelectorAll() 메서드

NodeList

NodeList 같은 배열과 유사한 노드 셋집합(리스트)입니다.

리스트 내 노드에 인덱스(인덱스)로 접근할 수 있습니다. 인덱스는 0에서 시작합니다。

length 속성리스트 내 노드 수를 반환합니다。

실례

예제 1

리스트 내 첫 번째 <li> 요소의 HTML 내용을 변경합니다：

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

직접 시도해보세요

예제 2

"myDIV" 내 <p> 요소의 수：

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

직접 시도해보세요

예제 3

"myDIV" 의 두 번째 <p> 요소의 폰트 크기를 변경합니다：

const element = document.getElementById("myDIV");
element.getElementsByTagName("p")[1].style.fontSize = "24px";

직접 시도해보세요

예제 4

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

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

직접 시도해보세요

예제 5

"myDIV" 의 네 번째 요소(인덱스 3)의 배경색을 변경합니다：

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

직접 시도해보세요

예제 6

"*" 파라미터를 사용하여 "myDIV"에 있는 모든 요소의 배경색을 변경합니다:

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

직접 시도해보세요

문법

element.getElementsByTagName(tagname)

파라미터

파라미터 설명
tagname 필수. 자식 요소의 태그 이름.

반환 값

타입 설명
NodeList

지정된 태그 이름을 가진 요소의 자식 요소.

요소는 소스 코드에서 나타나는 순서대로 정렬됩니다.

기술 세부 사항

getElementsByTagName() 이 메서드는 지정된 요소의 자식 노드를 탐색하고, 모든 Element 노드를 포함하는 배열(실제 NodeList 객체)을 반환합니다. 반환된 배열에서 요소의 순서는 문서 소스 코드에서 나타나는 순서와 일치합니다.

주의

Document 인터페이스도 정의되었습니다 getElementsByTagName() 메서드그것은 이 메서드와 유사하지만 전체 문서를 탐색하는 대신 특정 요소의 자식 노드를 탐색합니다.

이 메서드와 혼동되지 마세요 HTMLDocument.getElementsByName() 메서드 혼동되지 마세요，뒤자는 것은 name 속성 값에 기반하여 요소를 검색하지만 태그 이름에 기반하여 검색하지 않습니다.

브라우저 지원

모든 브라우저가 지원합니다 element.getElementsByTagName()：

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