HTML DOM getElementsByTagName() 메서드는 주어진 태그 이름을 가진 문서의 모든 요소 컬렉션을 가져오는 데 사용됩니다. 주어진 모든 요소를 ​​NodeList 객체로 반환합니다. 인덱스 번호를 사용하여 반환된 개체의 모든 요소에 액세스할 수 있습니다.

반환된 HTMLcollection은 일부 요소를 제거하거나 추가한 후 getElementsByTagName() 메서드를 계속해서 호출하지 않고도 DOM 트리와 동기화된 상태를 유지합니다.

구문

다음은 getElementsByTagName() 메서드의 구문입니다. -

element.getElementsByTagName(태그 이름)

여기에서 tagname은 우리가 얻고자 하는 자식 요소 tagname을 나타내는 필수 매개변수 값입니다.

예시

getElementsByTagName() 메서드의 예를 살펴보겠습니다. -

<헤드><스크립트> 함수 changePara() { var p =document.getElementsByTagName("P"); p[0].innerHTML ="이 텍스트는 변경되었습니다"; p[1].style.color ="빨간색"; p[1].style.backgroundColor ="노란색"; }
getElementsByTagName() 예제

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua

Ut enim ad minim veniam, quis nostrud exercitation ullamco labis nisi ut aliquip ex ea commodo consequat
CHANGE 
출력
 

 이것은 다음과 같은 출력을 생성합니다 -
 

 
 

 CHANGE 버튼을 클릭하면 -
 

 
 

 위의 예에서 -
 

 연관된 속성이 없는 두 개의 단락을 만들었습니다 -
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua

Ut enim ad minim veniam, quis nostrud exercitation ullamco labouris nisi ut 코모도 결과
 

 그런 다음 사용자가 클릭할 때 changePara()를 실행하는 CHANGE 버튼을 만들었습니다. 
 
변경
 

 changePara() 메서드는 문서 객체에 대한 getElementsByTagName() 메서드를 사용하여 두 

 요소를 nodeListObject로 가져와 변수 p에 할당합니다. 색인 번호를 사용하여 첫 번째 단락의 텍스트를 변경하고 두 번째 단락에 일부 스타일을 적용합니다 -
 
함수 changePara() { var p =document.getElementsByClassName("PARA1"); p[0].innerHTML ="이 텍스트는 변경되었습니다"; p[1].style.color ="빨간색"; p[1].style.backgroundColor ="노란색";}