getElementsByTagName() / querySelectorAll()

HTMLCollection을 반환하는 함수지만, 연속으로 혹은 다른 getElementsByClassName()과 같이 사용할 수 없다.

 

= ex ] ========================================================================

 

맞는 예시 : var tag = document.getElementsByTagName( 'div' );

 

틀린 예시 : var tag = document.getElementsByTagName( 'div' )[0].getElementsByClassName( 'class' );

 

               var tag = document.getElementsByTagName( 'div' )[0].getElementsByTagName( 'p' );

 

============================================================================

 

만약 틀린 예시 구문처럼 사용하고 싶을 경우에는 querySelectorAll()를 사용한다.

 

= ex ] ========================================================================

 

var tag = document.querySelectorAll( 'div' )[0].getElementsByClassName( 'class' );

 

var tag = document.querySelectorAll( 'div' )[0].getElementsByTagName( 'p' );

 

( 잘못된 사용 var tag = document.querySelectorAll( 'div' )[0].querySelectorAll( 'p' );  => p를 전체에서 다시 찾는다. div 하위에서 찾지 않는다.)

 

============================================================================

 

특정 태그와 특정 속성을 사용하여 검색하고 싶은 경우

 

= ex ] ========================================================================

 

예 ) Block 태그와 Lego 속성

 

var tag = document.querySelectorAll( 'Block[Lego]' );

 

( 값을 아는 경우 var tag = document.querySelectorAll( 'Block[Lego = "3"]' ); )

 

============================================================================

 

차이점은 getElementsByTagName()은 동적인 노드를, querySelectorAll()는 정적인 노드를 반환한다.

 

출처 && 테스트 : 

Document.getElementsByTagName() - Web API | MDN

 

 

Document.querySelectorAll() - Web API | MDN