Native CSS selectors with querySelector

Ext2.0의 Dom Query와 비슷하게 사파리에서 querySelector 와 querySelectorAll 메쏘드를 정의하다.
흠..이게 표준일줄이야 이제야 알다니...
2007년 12월 21일에 W3C에 Working Draft되어 있다. (URL : http://www.w3.org/TR/selectors-api/ )

많은 자바스크립트 라이브러리들이 이러한 돔쿼리를 제공하고 있는데
prototype.js, jQuery, Ext2.0 의 speed test 결과 Ext2.0이 조금 빨랐다..(단 내경우에... 크~ : IE7 on Vista)
넥스트리 내부에서 AJAX Framework 벤치마킹할때 이점도 가만이 됐는 부분이라 다시한번 정리해본다.


사파리에서의 샘플코드

 

/*
  * Get all the elements with class "hot" (duplicating getElementsByClassName)
   * A common use for this is as a toggle;
   * for example, a search feature might tag results with a class
  */
  document.querySelectorAll(".hot");

  /*
   * Get the currently hovered element
   */
  document.querySelector(":hover");

  /*
   * Get every other element in the <li> with id "large"
   * This is mostly useful for doing "zebra stripe" alternating rows.
   * Once CSS3 becomes more widespread, doing this directly via CSS will be more practical
  */
  document.querySelectorAll("#large:nth-child(even)");

Ext2.0에서 번역했던 DomQuery부분 : http://extjs.com/learn/Tutorial:DomQuery_Basics%28Korean%29

Reference :
Safari : http://webkit.org/blog/156/queryselector-and-queryselectorall/
W3C API : http://www.w3.org/TR/selectors-api/
Query speed test : http://webkit.org/perf/slickspeed/