JavaScript 강좌 | Method > .getElementsByTagName()

.getElementsByTagName()는 특정 태그를 가진 모든 요소를 선택합니다. 선택된 요소는 유사 배열 객체로 반환됩니다.

문법

document.getElementsByTagName( 'tagname' )

예를 들어 p 태그를 가진 첫번째 요소를 선택하려면 다음과 같이 합니다.

document.getElementsByTagName( 'p' )[0]

예제

http://book.cmsfactory.net/JavaScript/V01/method/getElementsByTagName-01.html

문서에서 p 태그를 가진 두번째 요소를 jb라는 변수에 넣고, 몇가지 정보를 출력하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript | .getElementsByTagName()</title>
  </head>
  <body>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <p>Third Paragraph</p>
    <hr />
    <script>
      var jb = document.getElementsByTagName( 'p' )[1];
      document.write( '<p>jb : ' + jb + '</p>' );
      document.write( '<p>typeof jb : ' + typeof jb + '</p>' );
      document.write( '<p>jb.innerHTML : ' + jb.innerHTML + '</p>' );
    </script>
  </body>
</html>

문법

element.getElementsByTagName( 'tagname' );

Document 객체뿐 아니라 Element 객체에서도 사용할 수 있습니다.

예제

http://book.cmsfactory.net/JavaScript/V01/method/getElementsByTagName-02.html

p 태그를 가진 두번째 요소를 선택한 후, 그 요소 안에서 span 태그를 가진 첫번째 요소를 선택하여 몇가지 정보를 출력하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript | .getElementsByTagName()</title>
  </head>
  <body>
    <p>First <strong>Paragraph</strong></p>
    <p>Second <strong>Paragraph</strong></p>
    <hr />
    <script>
      var jbP = document.getElementsByTagName( 'p' )[1];
      var jbS = jbP.getElementsByTagName( 'strong' )[0];
      document.write( '<p>jbS : ' + jbS + '</p>' );
      document.write( '<p>typeof jbS : ' + typeof jbS + '</p>' );
      document.write( '<p>jbS.innerHTML : ' + jbS.innerHTML + '</p>' );
    </script>
  </body>
</html>

Created on 2014-09-12 15:16 | Updated on 2017-07-05 21:21

이 글을 공유하기

Kakao