JavaScript / Object / document.getElementsByTagName() / 특정 태그를 가진 요소 가져오는 메서드
.getElementsByTagName()
.getElementsByTagName()는 특정 태그를 가진 모든 요소를 선택합니다. 선택된 요소는 유사 배열 객체로 반환됩니다.
문법 1
document.getElementsByTagName( 'tagname' )
예를 들어 p 태그를 가진 첫번째 요소를 선택하려면 다음과 같이 합니다.
document.getElementsByTagName( 'p' )[0]
예제 1
문서에서 p 태그를 가진 두번째 요소를 jb라는 변수에 넣고, 몇 가지 정보를 출력하는 예제입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</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>
문법 2
element.getElementsByTagName( 'tagname' );
Document 객체뿐 아니라 Element 객체에서도 사용할 수 있습니다.
예제 3
p 태그를 가진 두번째 요소를 선택한 후, 그 요소 안에서 strong 태그를 가진 첫번째 요소를 선택하여 몇 가지 정보를 출력하는 예제입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</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>