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

인수/파라메터

sTagName

필수적인 요소이며, 엘레멘트의 이름을 나타내는 문자열이다.

반환값

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

특기

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

• DHTML(Dynamic HTML) 사용
  클릭해보라.

  document.body.all.tags('DIV').length=

  <BUTTON onclick="showA.innerHTML=document.body.all.tags('DIV').length">클릭해보라.</BUTTON>
  <DIV>document.body.all.tags('DIV').length=<SPAN id=showA></SPAN></DIV>
  

• DOM(Document Object Model) 사용
  클릭해보라.

  document.body.getElementsByTagName('DIV')=

  <BUTTON onclick="showB.innerHTML=document.body.getElementsByTagName('DIV').length">클릭해보라.</BUTTON>
  <P>document.body.getElementsByTagName('DIV')=<SPAN id=showB></SPAN></P>
  

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>

적용

개체	script	IE

참조

(영문)DOM(W3C Document Object Model)

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

메서드 예제

<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>