더 직접적으로 요소에 액세스하지 않아야하는 이유는 무엇입니까? (elemId.innerHTML)

Question

elementID.innerHTML과 같은 HTML 요소에 액세스하는 데 필요한 JavaScript 코드를 살펴본 결과 거의 모든 튜토리얼에서 document.getElementById()을 검색했지만 작동합니다. 짧은 주소 지정에 대한 용어가 있는지조차 알지 못합니다.

처음에는 각 id'ed HTML 요소가 window 바로 아래에 있다고 생각했지만 getParent()을 사용하면 트리 구조가 있다는 것을 보여 주므로 원하는 요소가 중첩되어 있어도 상관 없습니다. 나는 짧은 테스트 케이스 작성 :

http://jsfiddle.net/hYzLu/

<div id="fruit">Mango<div id="color">red</div></div> 
<div id="car">Chevy</div> 
<div id="result" style="color: #A33"></div> 

result.innerHTML = "I like my " + color.innerHTML + " " + car.innerHTML; 

은 "짧은"방법은 좋은 바로 가기 모양을하지만 실질적으로 자습서에 표시되지 그것을 위해 그것은에 문제가 생각합니다.

document.getElementById()이 선호되는 이유는 무엇입니까?

Answer 1

왜 내가 요소에 더 접근해서는 안입니다 :) 직접 "(elemId.innerHTML)

하기 때문에, ID 이름 임의로 참조이 스레드, 에서 다른 사람에 따라 완전히를 지원하지 않습니다.

그럼 내가하고 싶은 일은 var에 선택 사항을 저장 한 다음 var를 참조하는 것입니다.

이가 할 수있는 좋은 일이 DOM을에 조회를 수행하는 것이 현명 비싼 과정, 메모리 있다는 것 왜 대신

var color = document.getElementById('color'); 
color.innerHTML = 'something'; 

이유를 사용해보십시오. 그리고 요소의 참조를 변수에 저장하면 정적이됩니다. 따라서 .doSomething()을 원할 때마다 조회를 수행하지 않습니다.

자바 스크립트 라이브러리는 심 기능을 추가하여 브라우저에서 일반 기능을 향상시키는 경향이 있습니다. 예를 들어 jquery의 셀렉터를 순수한 자바 스크립트와 비교할 때 이점이 될 것입니다. 실제로 메모리/퍼포먼스가 걱정된다면, 네이티브 JS는 일반적으로 스피드 테스트를 받는다. (jsperf.com은 속도를 측정하고 비교하기위한 좋은 도구입니다.)

Answer 2

여기가 보다 안전합니다. 같아요. 동일한 컨텍스트에서 result이라는 변수가 있다면 result.HTML 브라우저에서 wobbler를 던질 것이라고 확신합니다. 이 인스턴스에서 document.getElementById()의 방식으로 처리하면 분명히 연결된 DOM 요소가 제공됩니다. 동적 페이지에 HTML을 추가하는 경우

또한, 내가 잘못 될 수 있지만, 당신은 또한 어떤 result의 관점에서 예기치 않은 동작이 발생할 수있는 것은 "

Answer 3

또한 모든 ID가 변수 이름으로 작동하지 않는 값을 가질 수있는 것은 아닙니다. 예를 들어 귀하의 ID가 "nav-menu"인 경우.

난 당신이 창을 쓸 수도있을 것 같군요하지만 당신은 ID와 같은 이름을 가진 창 수준의 변수를 생성하면 어떻게됩니까 어떻게 나를 생각하게 [ "탐색 메뉴"]. innerHTML을

? 크롬을 테스트 한이 정확도를 확인하십시오. http://jsfiddle.net/8yH5y/

이것은 정말 나쁜 생각처럼 보입니다. 참조를 두 번 이상 사용하려면 document.getElementById ("id")를 사용하고 결과를 변수에 저장하십시오.