지정된 엘레멘트 이름들을 갖는 개체들의 컬렉션을 반환한다.

인수/파라메터
sTagName
필수적인 요소이며, 엘레멘트의 이름을 나타내는 문자열이다.
반환값

반환값 oCollection은 지정된 엘레멘트 이름들을 갖는 개체들의 컬렉션이다.

특기

getElementsByTagName 메서드는 all 컬렉션에서 tags 메서드를 사용하는 것과 같다.
예를들어, body 엘레멘트로부터 div 엘레멘트들의 컬렉션을 반환받는 코드이다.

getElementsByTagName 메서드를 사용할 때, 지정한 이름의 태그 이름을 갖는 모든 자식과 네스트(nested)된 자식엘레멘트들이 반환된다. 예를들어 다음 코드에서 getElementsByTagName 메서드로 모든 SPAN 개체의 컬렉션을 반환한다.

자식 Span #1
자식 Div #2손자 Span #21증손자 Span #211

oDiv.getElementsByTagName('SPAN').length=

<STYLE>.ex{border:solid 1 green}</STYLE>
<DIV id="oDiv">
<SPAN class=ex>자식 Span #1
<DIV>자식 Div #2<SPAN class=ex>손자 Span #21<SPAN class=ex>증손자 Span #211</SPAN></SPAN></DIV>
</SPAN>
</DIV>
<BUTTON onclick="showC.innerHTML=oDiv.getElementsByTagName('SPAN').length">클릭해보라.</BUTTON>
<P>oDiv.getElementsByTagName('SPAN').length=<SPAN id=showC></SPAN></P>
적용
개체scriptIE
참조
(영문)DOM(W3C Document Object Model)

이 메서드는 (영문)DOM1(W3C Document Object Model Level 1)에서 정의되었다.


메서드 예제

결과 표시창

목록 위를 클릭해보라.

getElementsByTagName 메서드로 선택된 li 엘레멘트를 기준으로 ul 엘레멘트의 자식 컬렉션을 반환한다.

<SCRIPT>
function showTags(){
  var srcObj=event.srcElement;
  var liCol=srcObj.parentElement.getElementsByTagName('LI');
  str='liCol.length='+liCol.length+'<BR>';
  for (i=0;i< liCol.length;i++){
    str+='<SPAN style=width:2em></SPAN>liCol['+i+'].childNodes.length='+liCol[i].childNodes.length+'<BR>';
    for (j=0;j< liCol[i].childNodes.length;j++){
      if (liCol[i].childNodes[j].nodeValue){
        str+='<SPAN style=width:4em></SPAN>liCol['+i+'].childNodes['+j+'].nodeValue=<FONT color=blue>'+
          liCol[i].childNodes[j].nodeValue+'</FONT><BR>';
      }
    }
  }
showD.innerHTML=str;
}
</SCRIPT>

<UL onclick="showTags()" style="background-color:ffa;border:solid 1 gray">
<LI>항목 1
<UL>
<LI>하부 항목 1-1
<OL>
<LI>하부 하부 항목 1-1-1
<LI>하부 하부 항목 1-1-2
</OL>
<LI>하부 항목 1-2
<LI>하부 항목 1-3
</UL>
<LI>항목 2
<UL>
<LI>하부 항목 2-1
<LI>하부 항목 2-3
</UL>
<LI>항목 3
</UL>
<DIV id=showD>결과 표시창</DIV>