Native CSS selectors with querySelector
Scripter/JAVASCRIPT / 2008. 3. 6. 09:54
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 벤치마킹할때 이점도 가만이 됐는 부분이라 다시한번 정리해본다.
사파리에서의 샘플코드
흠..이게 표준일줄이야 이제야 알다니...
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 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/
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/
'Scripter > JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트로 구현한 3D 포토갤러리 (0) | 2008.03.06 |
|---|---|
| JsonSQL: JSON parser, SQL style (0) | 2008.03.06 |
| IE minimize (2) | 2008.03.06 |
| Javascript Performance Stack (2) | 2008.03.03 |
| 팁 : 크로스브라우저 지원 스크롤바 바꾸기 (0) | 2008.02.18 |