document.getElementById()를 변수에 저장하거나 매번 호출해야합니까?

Question

나는 (마우스 오버, 클릭, 위치 변경) 생성되고 참조되는 요소가 많이 있습니다.

나는 해당 요소의 ID를 가지고 있습니다. 변수에 document.getElementById(ID) 호출을 저장하는 것이 현명한가요? 또는 매번 document.getElementById()을 호출하는 것이 더 빠르거나 빠릅니다.

var app = []; 
var app.elements = []; 
//i can store ['id1', 'id2', 'id3'] 
//OR ['id1' => document.getElementById('id1'), 'id2' => document.getElementById('id2'), 'id3' => document.getElementById('id3')] 

Answer 1

가능하면 참조를 다시 사용해야하지만 각 기능 본문에서 새로운 참조를 얻어야 할 수도 있습니다.

예 :

var e1 = document.getElementById('id1'); 
e1.innerHTML = 'test'; 
e1.className = 'info'; 

당신이 참조를 더 이상 유지하는 경우

, 당신은 그들이 더 이상 작동하지 않을 수 있습니다. 예를 들어 페이지의 일부에 대해 innerHTML을 가져 와서 다시 저장하면 해당 부분의 모든 요소가 제거되고 다시 작성됩니다. 해당 부분의 요소 중 하나에 대한 참조가있는 경우 해당 요소는 더 이상 존재하지 않습니다.

// This will recreate all elements inside the 'parent' element: 
document.getElementById('parent').innerHTML += 'test'; 

Answer 2

큰 여백이 아닌 변수에 요소를 저장하는 것이 확실히 빠릅니다. 이것은 대소 문자와는 다른 것으로 각 개별적으로 적용되어야합니다.

아마도 가장 큰 요소는 가독성입니다. 요소에 직접 액세스하는 것이 더 읽기 쉽습니다.

theMainButton.style.color = "red"; 
// vs. 
document.getElementById("theMainButton").style.color = "red"; 

Answer 3

getElementById은 본질적으로 자바 스크립트 객체 인 요소 노드를 반환합니다. 이 객체를 변수에 할당 할 수 있습니다. 즉, 나중에 해당 변수를 입력 할 때마다 변수가이 객체를 가리 킵니다. 그래서,

var id1 = document.getElementById('id1'); 

id1

지금 id1의 id와 DOM 요소를 의미합니다. id과 함께 요소가 발견되지 않으면 document.getElementById을 반환합니다.

요소가 DOM 내에 있고 대체되지 않는 경우 요소를 배열에 저장하면 성능 비용없이 원하는만큼 여러 번 참조 할 수 있습니다. 도움이된다면

, 당신은 당신을 위해 그것을 할 수있는 간단한 함수를 만들 수 있습니다

function getElementsByIds(/* id1, id2 ... */) { 

    var elems = []; 

    for (var i = 0, l = arguments.length; i < l; i++) { 
     elems[i] = document.getElementById(arguments[i]); 
    } 

    return elems; 

} 

app.elements = getElementsByIds('id1', 'id2', 'id3'); 

Answer 4

이 질문에 하나의 정답이 없다. 그것은 모두 당신이 함께 일 해야하는지에 달려 있습니다. DOM 트리에 많은 양의 요소가있는 페이지로 작업하는 경우 참조를 캐시하고 다시 사용하여 조회 시간을 단축하는 것이 좋습니다. 작은 페이지에서 작업하는 경우에는 요소를 즉시 찾아보고 브라우저의 메모리 소비를 최소화하는 것이 좋습니다.

또한 타겟팅하는 브라우저에 따라 다릅니다. 예를 들어, 새로운 버전의 파이어 폭스는 처음에는 요소를 정밀하게 만들기 위해 시간이 좀 걸리지 만, 내부적으로 참조를 캐시하기 때문에 다음 번에 찾아 보면 거의 순간적으로 보일 것입니다. 반면 IE는 조회 값을 캐시하지 않지만 첫 번째 시도에서 Firefox보다 검색 속도가 훨씬 빠릅니다.

많은 현대 프레임 워크가 사용자가 찾은 요소를 캐시합니다. 그러나, 나는 개인적으로 대부분 document.getElementById를 사용하는 것을 선호합니다.

function registerElement(id) 
{ 
    if (!this["get_" + id]) 
     this["get_" + id] = function() { 
      var element = document.getElementById(id); 
      this["get_" + id] = function() {return element;}; 
      return element; 
     } 
} 

당신은 registerElement를 호출하고 그것을 요소의 ID를 전달하여 이것을 사용 : 내가 조회 값을 캐시해야 할 때 내가 할 것은 다음과 같다. 값을 가져올 필요가있을 때 get_element id를 호출하면 전달 된 첫 번째 항목에서 요소를 찾아 캐시합니다. 이후의 모든 호출에서 캐시 된 값이 반환됩니다.