querySelectorAll , querySelector

less than 1 minute read

  • 쿼리 셀렉터
  • 역활은 CSS의 selector표현식을 사용해서 대상을 가져오게 한다.
  • 즉, jquery의 $({selector표현식}’)과 같은 역활. 차이점은 이건 JS에서 바로 지원이 됨.

  • querySelectorAll
  • 링크  : 개발자.모질라.org
  • selector에 대응되는 모든 엘레멘트를 가져온다. 
  • 리턴 값을 대응되는 엘레멘트들의 리스트(배열)이다.
  • 지원버전
  • 크롬 : 1
  • FF : 3.5
  • IE : 8(부분적 CSS2 까지), 9
  • Opera : 10
  • Safari : 3.2.525.3

  • ex
  • document.querySelectorAll(‘div’); //문서의 모든 div
  • var f = document.formName;
    f.querySelectorAll(‘input[type=”checkbox”]:checked’); //formName이라는 폼속의 checkbox 중 체크된 것들

  • querySelector
  • 링크 :  개발자.모질라.org
  • selector에 대응되는 모든 엘레멘트 중 최초 하나만 가져온다.
  • 리턴값은 대응되는 엘레멘트의 첫번째 엘레멘트이다.
  • ex
  • document.querySelector(‘div’); //문서의 모든 div 중 첫번째 엘레멘트
  • var f = document.formName;
    f.querySelector(‘input[type=”checkbox”]:checked’); //formName이라는 폼속의 checkbox 중 체크된 것들 중 첫번째 엘레멘트

  • 지원버전
  • 크롬 : 1
  • FF : 3.5
  • IE : 8(부분적 CSS2 까지), 9
  • Opera : 10
  • Safari : 3.2.525.3

🔗original-link

Updated: