[jQuery] best practice - DOM manipulation

 

이 글은 아래 사이트를 토대로 작성되었습니다.

jQuery Best Practices

DOM 조작하기

i). 일반적인 경우

// elem 요소의 title 속성을 해당 요소의 text를 통해 변경
$(".container input#elem").attr("title", $(".container input#elem").text());

// elem 요소의 색상을 변경
$(".container input#elem").css("color", "red");

// elem 요소를 fadeOut 처리
$(".container input#elem").fadeOut();

• 선택자가 길어진다.
• 필요시마다 .container와 같은 class 선택자를 사용하므로 호출시마다 DOM을 탐색한다.

 

ii). better practice

// elem 요소의 title 속성을 해당 요소의 text를 통해 변경
$("#elem").attr("title", $("#elem").text());

// elem 요소의 색상을 변경
$("#elem").css("color", "red");

// elem 요소를 fadeOut 처리
$("#elem").fadeOut();

• 불필요한 선택자를 줄인다.
• id 선택자의 특징을 이용하여 DOM 탐색 효율을 높인다.

 

iii). best practice

// DOM 요소를 변수 elem에 저장
var elem = $("#elem");

// elem 요소의 title 속성을 해당 요소의 text를 통해 변경
elem.attr("title", elem.text());

// elem 요소의 색상을 변경
elem.css("color", "red");

// elem 요소를 fadeOut 처리
elem.fadeOut();

// Chaining을 활용한 경우
// elem.attr("title", elem.text()).css("color", "red").fadeOut();

• DOM 요소를 변수에 저장하여 캐싱하는 효과를 얻을 수 있다.