MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Document.getElementsByTagName()

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

 

주어진 태그네임을 가진 element들의 HTMLCollection 을 반환한다. 루트 노드를 포함한 전체 문서가 검색된다. 반환된 HTMLCollection은 유효하며, 이것은 DOM tree와 싱크를 맞추기 위해 document.getElementsByTagName()을 다시 부를 필요 없이 자동으로 스스로를 업데이트한다는 것을 의미한다.

Syntax

var elements = document.getElementsByTagName(name);
  • elements 는 트리에 나타난  순서에 따라 발견되어 정렬되어있는 유효한 HTMLCollection 이다. (그러나 아래의 노트를 보라) 
  • name은 elemtents 의 이름을 나타내는 문자열이다. 특별한 문자열인 "*"는 모든 elements를 의미한다.
The latest W3C specification에서는 elements가 an HTMLCollection이라고 말한다. 그러나, 이 method는 WebKit browser들 안에서는 NodeList를 반환한다. 자세한 것은  bug 14869를 참조하라.

Example

아래의 예시에서  getElementsByTagName()는 특정한 부모 element로부터 시작한다. 또한 그 부모 element로 부터 해당 DOM을 top-down 형식으로 재귀적으로 검색하면서, 인자로 주어진 tag name과 일치하는 모든 자식 elements들을 collection을 만든다. 이것은 DOM tree 안에 있는 특정한 element에서 검색을 시작한다는 점에서  document.getElementsByTagName()과 Element.getElementsByTagName()이 기능적으로 동일하다는 것을 의미한다. 

버튼을 클릭하면 특정한 부모(해당 document 자체거나 혹은 한두개의 nested 된 <div> elements)의 하위 문단의 수를 세기 위해서 getElementsByTagName()를 이용한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>getElementsByTagName example</title>
  <script>
    function getAllParaElems() {
      var allParas = document.getElementsByTagName('p');
      var num = allParas.length;
      alert('There are ' + num + ' paragraph in this document');
    }

    function div1ParaElems() {
      var div1 = document.getElementById('div1');
      var div1Paras = div1.getElementsByTagName('p');
      var num = div1Paras.length;
      alert('There are ' + num + ' paragraph in #div1');
    }

    function div2ParaElems() {
      var div2 = document.getElementById('div2');
      var div2Paras = div2.getElementsByTagName('p');
      var num = div2Paras.length;
      alert('There are ' + num + ' paragraph in #div2');
    }
  </script>
</head> 
<body style="border: solid green 3px">
  <p>Some outer text</p>
  <p>Some outer text</p>      

  <div id="div1" style="border: solid blue 3px">
    <p>Some div1 text</p>
    <p>Some div1 text</p>
    <p>Some div1 text</p>     

    <div id="div2" style="border: solid red 3px">
      <p>Some div2 text</p>
      <p>Some div2 text</p>
    </div>
  </div>

  <p>Some outer text</p>
  <p>Some outer text</p>

  <button onclick="getAllParaElems();">
    show all p elements in document</button><br />

  <button onclick="div1ParaElems();">
    show all p elements in div1 element</button><br />

  <button onclick="div2ParaElems();">
    show all p elements in div2 element</button>
        
</body>
</html>

Notes

HTML document를 부를 때, getElementsByTagName()은 처리 전에 인자를 소문자로 변환한다. 이것은 HTML document안에 있는 카멜케이스로 표현된 SVG element들과 매칭 시키려고 할 때 바람직하지 않다. 이러한 경우 document.getElementsByTagNameNS()가 더 유용하다. bug 499656를 참고하라.

document.getElementsByTagName()는 검색할 때 전체 document를 포함하는 것만 제외하면 element.getElementsByTagName()와 비슷하다. 

Specifications

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: dayoungles
 최종 변경: dayoungles,