특정 태그를 가진 요소 선택하는 방법 - document getElementsByTagName()

document getElementsByTagName()

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

 

기본형 1

document.getElementsByTagName( 'tagname' );

 

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

document.getElementsByTagName( 'p' )[0];

 

예제

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

<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<hr/>

var abc = document.getElementsByTagName( 'p' )[1];
document.write( '<p>abc : ' + abc + '</p>' );
document.write( '<p>typeof abc : ' + typeof abc + '</p>' );
document.write( '<p>abc.innerHTML : ' + abc.innerHTML + '</p>' );

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

기본형 2

element.getElementsByTagName( 'tagname' );

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

 

예제

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

<p>First <strong>Paragraph</strong></p>
<p>Second <strong>Paragraph</strong></p>
<hr/>

var p = document.getElementsByTagName( 'p' )[1];
var st = p.getElementsByTagName( 'strong' )[0];
document.write( '<p>st : ' + st + '</p>' );
document.write( '<p>typeof st : ' + typeof st + '</p>' );
document.write( '<p>st.innerHTML : ' + st.innerHTML + '</p>' );

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.