selectorAll()

Type : public method

Support : 0.6

Return : Array

  • DOM을 검색하여 해당 Selector와 일치하는 모든 개체를 배열로 반환.
  • 대상개체를 지정하지 않을때는 document를 설정해 주면 된다.
    내장함수 querySelector 일부 기능들을 구현.
    nodeName, .className, .className.className, #id, nodeName.className, nodeName.className.className, nodeName#id, ">" 직계 하위객체
    Space 방계 하위객체 모두, 다중 객체선택 구분자 "," (","를 사용하여 다중 selector를 입력하면 나중에 작성된 selector를 기준으로 단일 element를 검출한다.)
  • 지원하는 속성 Selector
    • [attr] 해당속성이 있을때
    • [attr=value] 값이 같을때
    • [attr^=value] 시작값이 같을때
    • [attr$=value] 끝값이 같을때
    • [attr*=value] 일부문자가 같을때
    • [attr~=value] 완전체단어일치

Methods

  • selectorAll( selector ) : Arrayver 0.6~

    최신 querySelector를 지원하는 브라우저에서는 내장 함수를 활용해서 구현되었고, IE6~7에서는 별도로 작성한 로직으로 동작한다.
    IE6~7에서는 id난 className으로 검출할때 nodeName을 넣지않으면 타겟 문서 전체를 검색 하기 때문에 퍼포먼스가 떨어진다.
    되도록이면 타겟과 nodeName을 넣고 검색을 해야한다.
    *:first-child와 같은 가상 선택자 형식의 Selector는 지원하지 않는다.
    • selector : String
      검색할 Selector 문자열

Example

var el1 = $B( document ).selectorAll( '#wrap > div.box' );
var el2 = $B( el1[0] ).selectorAll( 'a img' );
var el3 = $B( '#wrap' ).selectorAll( 'p.box.green' );