WebKit의 querySelector와 guerySelectorAll 지원 시작

JavaScript 댓글 달기

지금의 웹 어플리케이션 개발의 추이를 보면, 어떤 동작을 부여하는데 있어서 대부분은 특정 DOM elements를 불러와서 원하는 동작 적용하게 된다. 여기서 특정 DOM elements를 가져오는데 걸리는 시간은 웹 어플리케이션의 동작 속도에 커다란 영향을 끼칠 수도 있다.

현재, 많은 JavaScript library들이 CSS3 selectors를 이용해서 특정 DOM 요소들을 불러오는 기능을 구현하고 있으나, 경쟁적인 속도 단축 노력에도 불구하고, 웹 브라우저가 직접 이런 작업을 지원해 준다면 속도와 효율면에서 커다란 득을 볼 수 있는 것은 당연한 얘기다. 이런 작업의 표준화를 위해 W3C에서는 Selectors API를 제공하고 있는데, 마침 얼마전 WebKit에서도 getElementsByClassName을 지원하기 시작한데 이어서, 이제 특정 DOM 요소들을 끄집어 오는 작업을 위한 querySelector와 guerySelectorAll methods를 지원하기 시작했단다.

사용 예를 보면,

/*
   * 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)");

이제, CSS3 selectors를 이용해서 특정 DOM elements를 손쉬우면서도 빠르게 끄집어 내서 동작을 부여할 수 있게 된 것이다. 앞으로 이 Selectors API가 기타 다른 브라우저들에서도 지원해 준다면, DOM Scripting의 효율도 더 높아질 듯 하다.

조만간 있을 Safari의 갱신 때 이것도 포함되었으면 좋겠군.

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요