Node.js DOM 요소 ID는 전역 변수 _DOM입니다.

표준사양

HTML5 사양 문서 는 다음 두 가지 규칙 중 하나를 충족하는 요소가 있는 경우 window 객체에 해당 속성이 있어야 하며 속성 값은 이 객체입니다.

• 요소에 ID 속성이 있는 경우 ID 속성의 속성 값이 창 개체의 속성 이름이 됩니다.
• 요소에 name 속성이 있는 경우 name 속성의 속성 값은 창 개체의 속성 이름이 됩니다. 그러나 이 요소의 태그 이름은 a, applet, Area, embed, form, 프레임이어야 합니다. , 프레임셋, iframe, img, 객체 중 하나.

ID 속성이 "foo"인 div 요소가 포함된 페이지가 있다고 가정해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

이러한 방식으로 위의 div 요소는 window.foo(다른 창 속성과 마찬가지로) 또는 전역 변수 foo를 통해 액세스할 수 있습니다. 예를 들어 Chrome 콘솔에서는 다음을 수행할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

> "foo" in window
true
> ; foo

Firefox

Firefox(14) 약간 다르게 작동합니다.

코드 복사 코드는 다음과 같습니다.

> in window
false
> typeof foo // 이 전역 변수가 존재합니까?
object
//오류 콘솔은 다음 경고를 출력합니다.//전역 범위에서 ID/NAME이 참조하는 요소입니다. .
//대신 W3C 표준 document.getElementById()를 사용하세요.

> foo
[object HTMLDivElement]
//오류 콘솔에서 다음 경고를 출력합니다.// 전역 범위의 ID/NAME. 대신 W3C 표준 document.getElementById()를 사용하세요.> "foo" in window true

코드 복사 코드는 다음과 같습니다.

> "foo" in window
false
> / 이 전역 변수가 존재합니까?
object
//오류 콘솔은 다음 경고를 출력합니다.//전역 범위에서 ID/NAME이 참조하는 요소입니다.
//W3C 표준 문서를 사용합니다. 대신
> foo

[object HTMLDivElement]
//오류 콘솔은 다음 경고를 출력합니다.//전역 범위에서 ID/NAME이 참조하는 요소입니다.
//W3C 표준 문서를 사용합니다. () 대신.> true 창의 "foo"

무슨 일이 일어나고 있나요? 초기화되면 창에 foo 속성이 없습니다. 하지만 이 속성에 처음으로 액세스하면(window.foo 속성을 통해 직접 또는 전역 변수 foo를 통해) 자동으로 액세스됩니다.

번역가의 메모: Firefox14, 15, 18에서는 경고를 발견하지 못했지만, Firefox12를 테스트할 때 실제로 경고가 있었습니다.

[참고: 예제의 코드는 웹 페이지의

script 태그를 통해 실행될 때만 유효하며 터미널에서는 전역을 처리할 때 다른 방법을 사용하기 때문입니다. 물체.]

번역자 주: 예제의 코드를 Firebug에서 시도했지만 아무런 차이를 찾지 못했습니다.

foo의 값을 읽으려고 하면 div 요소가 정상적으로 반환되지만 오류 콘솔에는 그렇게 하면 안 된다는 경고가 표시됩니다. 경고가 맞습니다: 이 기능은 터미널에서 디버깅할 때 사용할 수 있지만 실제 코드에서는 사용하면 안 됩니다.

Cody Lindley는

jsPerf 테스트를 작성하여 전역 변수를 통해 foo에 액세스하는 와 window.foo를 통해 foo의 성능 차이. 흥미롭게도 Firefox에서는 window.foo에만 액세스하는 것이 더 빠릅니다.