Javascript 효율적인 DOM 접근, 추가, 수정 코드 작성법

Javascript 효율적인 DOM 접근, 추가, 수정 코드 작성법

 

페이지 내 DOM을 컨트롤 하는 것은 Javascirpt 에서 처리하는 가장 흔한 일 중 하나입니다.

효율적인 DOM 접근, 조작, 이벤트 처리방법을 알아두고,

가독성, 성능이 좋은 코딩을 하도록 합시다.

 

반복문 내 DOM 접근은 피한다

 

/* 안티패턴 */
for(let i=0, n=10; i<n; i++){
    document.getElementById("test").innerHTML += (i + ", ");
}

 

DOM 접근은 비용이 많이 드는 작업입니다. 반복문 내 접근을 피하도록 합니다.

 

let html = "";
for(let i=0, n=10; i<n; i++){
    html += (i + ", ");
}
document.getElementById("test").innerHTML = html;

 

DOM의 참조를 지역변수에 할당하여 사용한다

 

/* 안티패턴 */
document.getElementById("test").classList.add("gr");
document.getElementById("test").style.cursor = "pointer";
document.getElementById("test").textContent = "정상";

 

같은 DOM에 반복적으로 접근해야 한다면 지역변수에 할당하여 사용합니다.

 

const test = document.getElementById("test");
test.classList.add("gr");
test.style.cursor = "pointer";
test.textContent = "정상";

 

가능하면 Selector API를 사용한다.

 

document.getElementById("test");
document.getElementsByClassName("test");
document.getElementsByTagName("input");
document.getElementById("test").getElementByTagName("input");

 

DOM 메서드 보다는 Selector API를 사용합니다. 

document.getElementById 메서드가 노드를 찾는 가장 빠른 방법입니다.

하지만 다른 DOM 메서드들 보다는 Selector API가 항상 빠르고 코드도 간결합니다.

HTMLCollection과 NodeList를 리턴한다는 차이가 있으니, 꼭 HTMLCollection이어야 하지 않는 이상

Selector API를 활용하도록 합시다.

 

document.querySelector("#test");
document.querySelectorAll(".test");
document.querySelectorAll("input");
document.querySelectorAll("#test input");

 

Link : https://aljjabaegi.tistory.com/518

Javascript jQuery selector 비교 정리 querySelectorAll getElements 차이 NodeList, HTMLCollection 차이

 

부분적인 DOM 추가 보다는 일괄 추가 하도록 한다

 

/* 안티패턴  */
let div, checkbox, label;

div = document.createElement("div");
checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "chk";
label = document.createElement("label");
label.setAttribute("for", "chk");
div.appendChild(checkbox);
div.appendChild(label);

document.body.appendChild(div);

div = document.createElement("div");
checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "chk2";
label = document.createElement("label");
label.setAttribute("for", "chk2");
div.appendChild(checkbox);
div.appendChild(label);

document.body.appendChild(div);

 

 

2개의 div 태그가 동적으로 추가되게 됩니다. 이렇게 동적으로 복수의 DOM을 추가할 경우에는 

documentCreateFragment를 써서 조각을 만든 후 한번만 추가하도록 합니다.

 

fragment는 DOM의 트리의 일부가 아닌 빈 조각을 생성합니다. 이것은 자식들을 추가하는 페이지 내에 reflow (엘리먼트의 위치와 좌표의 계산)을 유발할지 않기 때문에 더 좋은 성능의 결과를 가져오게 됩니다.

 

let div, checkbox, label, frag;

frag = document.createDocumentFragment();
div = document.createElement("div");
checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "chk";
label = document.createElement("label");
label.setAttribute("for", "chk");
div.appendChild(checkbox);
div.appendChild(label);

frag.appendChild(div);

div = document.createElement("div");
checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "chk2";
label = document.createElement("label");
label.setAttribute("for", "chk2");
div.appendChild(checkbox);
div.appendChild(label);

frag.appendChild(div);

document.body.appendChild(frag);

 

DOM의 수정은 복사해서 하도록 하자

 

const oldNode = document.getElementById("old"),
      cloneNode = oldNode.clone(true);
      
/* cloneNode 로 변경작업 */
oldNode.parentNode.replaceChild(cloneNode, oldNode);

 

clone 메소드를 사용하여 수정을 하는 Element를 복사하여 수정을 하는 것이 효율적입니다.

요소에 접근하여 수정하는 것 보다는 복사한 요소를 수정 후 대체 해주도록 합니다.

 

위에서 설명한 5가지를 지키면 코드는 길어지지만 성능적으로 우수한 개발을 할 수 있습니다.

코드가 길어지는 것을 보완하기 위해 위의 기능들을 함수화하여 사용하여도 좋습니다.