jQuery DOM 탐색 Selector

가능하면 ID selector를 사용하세요.

jQuery에서는 document.getElementById()를 사용하기 때문에 ID selector가 빠릅니다. 하지만 가장 빠른 것은 native javascript 입니다.

// Fastest
document.getElementById(‘myId’);

// Fast - still little slower than native
$(‘#myId’);

// Slow
$('.myClass');

class selector를 사용할 때에는 element type을 selector 앞에 사용하지 마세요.

// Fast
var $products = $('.products');

// Slow
var $products = $('div.products');

특정 id를 기준으로 자식 element 목록을 탐색할 때는 .find()를 사용하세요.

// Good - #products is already selected by document.getElementById() so only div.id needs to go through Sizzle selector engine
var $productIds = $('#products').find('div.id');

// Bad - a nested query for Sizzle selector engine
var $productIds = $('#products div.id');

selector를 최적화 하세요.

가능하다면 selector의 최우측은 "tag.class"를, 좌측엔 "tag" 또는 ".class"로 조합하면 빠릅니다.

// Optimized
$('.data td.gonzalez');

// Unoptimized
$('div.data .gonzalez');

복잡한 selector는 피하세요.

// Better
$('.data td.gonzalez');

// Normal
$('.data table.attendees td.gonzalez');

탐색 범위를 좁힐 수 있도록 selector에 context 정보를 제공하세요.

// Faster - because now it only looks under class-container 
$('.class','#class-container'); 

// Slower - because it has to traverse the whole DOM for .class 
$('.class');

전역 selector는 피하세요.

// Much better 
$('.buttons').children(); 
// Extremely expensive 
$('.buttons > *'); 

// Much better 
$('.category input:radio'); 
// Implied universal selection 
$('.category :radio'); 
// Same thing - explicit now 
$('.category *:radio');

selector를 명확하게 사용하세요.

selector를 생략하는 경우 이는 전역 selector를 사용하는 것과 다를바 없습니다.

// Good 
$('div.someclass input:radio'); 

// Bad 
$('div.someclass :radio');

ID selector를 사용할때는 다른 것과 같이 사용하지 마세요.

document.getElementById()를 사용하기 때문에 혼합해서 사용하면 빠르지 않습니다.

// Good - only calls document.getElementId(); 
$('#inner');

// Bad 
$('#outer #inner'); 
$('idv#inner'); 
$('.outer-container $inner');