Element.getElementsByTagName()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Element.getElementsByTagName() 메서드는 제공된 태그 네임(tag name)을 가지는 엘리먼트의 유효한 HTML 컬랙션를 반환합니다. 엘리먼트가 특정된 범위를 검색하는 경우, 그 자신의 엘리먼트는 제외하고, 특정된 엘리먼트의 하위에 있는 서브트리가 검색됩니다. 반환된 리스트가 live 상태이면, 리스트는 DOM 트리와 함께 자동적으로 업데이트 되는 것을 의미합니다. 결과적으로, 동일한 엘리먼트와 인자값으로 Element.getElementsByTagName() 을 여러번 호출할 필요성은 없어집니다.

HTML 문서 내에서 HTML 엘리먼트가 호출되면, getElementsByTagName는 진행하기 전에 그 인자들을 소문자로 변환합니다. 따라서, 카멜케이스로 이루어진 SVG 엘리먼트를 HTML문서의 서브트리 내에서 매칭하고자 하는 경우에는 Element.getElementsByTagNameNS()을 사용해야 합니다.

Element.getElementsByTagName는 특정된 엘리먼트의 하위에 있는 엘리먼트 만을 검색하는 것으로 한정된 것을 제외하고는 Document.getElementsByTagName()와 실질적으로 유사합니다.

문법

js
elements = element.getElementsByTagName(tagName);
  • elements is a live HTMLCollection of found elements in the order they appear in the sub-tree. If no elements were found, the HTMLCollection is empty.
  • 요소들의 서브트리안에서 나타나는 순서대로 발견된 요소들은 live HTMLCollection 입니다.
  • element is the element from where the search should start. Note that only the descendants of this element are included in the search, but not the element itself.
  • 검색이 시작되어야 하는 요소에서부터 요소들이라고 할 수 있습니다. 요소 그 자체가 아니라 요소들에서 파생된 요소만 검색에 포함된다는 것을 알아두세요.
  • tagName is the qualified name to look for. The special string "*" represents all elements. For compatibility with XHTML, lower-case should be used.
  • tagName은 둘러볼 만한 가치가 있는 이름이다.특별한 문자열인 "*"은 모든 요소들을 대표합니다. XHTML과의 호환성을 위해서, 소문자가 사용되어야 합니다.

Example 예제

js
// check the alignment on a number of cells in a table.
var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
  var status = cells[i].getAttribute("data-status");
  if (status == "open") {
    // grab the data
  }
}

Specifications 명세

Specification
DOM Standard
# dom-element-getelementsbytagname

Browser compatibility 브라우저 호환성

BCD tables only load in the browser