HTML DOM getElementsByTagName() 메서드

❮ 요소 개체

예시

목록에서 첫 번째 <li> 요소(인덱스 0)의 HTML 콘텐츠를 변경합니다.

var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";

정의 및 사용

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

NodeList 개체는 노드 모음을 나타냅니다. 노드는 인덱스 번호로 액세스할 수 있습니다. 인덱스는 0에서 시작합니다.

팁: NodeList 개체의 length 속성을 사용 하여 지정된 태그 이름을 가진 자식 노드의 수를 결정한 다음 모든 노드를 반복하고 원하는 정보를 추출할 수 있습니다.

팁: 매개변수 값 "*"은 요소의 모든 자식 요소를 반환합니다.

브라우저 지원

표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Method
getElementsByTagName()	1.0	6.0	3.0	3.0	9.5

통사론

element.getElementsByTagName(tagname)

매개변수 값

Parameter	Type	Description
tagname	String	Required. The tagname of the child elements you want to get

기술적 세부 사항

DOM 버전	핵심 레벨 1 요소 개체
반환 값:	지정된 태그 이름을 가진 요소의 자식 요소 컬렉션을 나타내는 NodeList 개체입니다. 반환된 컬렉션의 요소는 소스 코드에 나타나는 대로 정렬됩니다.

더 많은 예

예시

<div> 요소 내부에 몇 개의 <p> 요소가 있는지 확인합니다(NodeList 객체의 length 속성 사용).

var x = document.getElementById("myDIV").getElementsByTagName("P").length;

예시

<div> 요소 내에서 두 번째 <p> 요소(색인 1)의 배경색을 변경합니다.

var x = document.getElementById("myDIV");
x.getElementsByTagName("P")[1].style.backgroundColor = "red";

예시

<div> 요소 안에 있는 모든 <p> 요소의 배경색을 변경합니다.

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

예시

<div> 요소 내에서 네 번째 요소(인덱스 3)의 배경색을 변경합니다.

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

예시

"*" 매개변수 사용.

<div> 요소 안에 있는 모든 요소의 배경색을 변경합니다.

var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("*");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}

JS Reference

JavaScript

Window

HTML DOM

Web APIs

HTML Objects

Other References