명명 된 요소 ID는 JavaScript Globals로 참조 할 수 있습니다

> 알아요? ID가있는 DOM 요소는 JavaScript의 글로벌 변수로 액세스 할 수 있습니까? 이것은 오랫동안 주변에 있었던 기능이지만 처음으로 단지 그것을 탐구했습니다.

이 기능에 대해 처음 들으면 준비하십시오! HTML의 요소에 ID를 추가하면 실제로 적용되는 방법을 확인할 수 있습니다.

일반적으로, 우리는

또는

를 사용하여 새로운 변수를 정의하여 요소를 선택합니다.

그러나 실제로, 우리는 이러한 번거로운 작업 없이는

<div id="cool"></div>

에 액세스 할 수 있습니다. 따라서 html의 모든 ID (또는 이름 속성)는 를 사용하여 javaScript로 액세스 할 수 있습니다. 다시 말하지만, 이것은 "새로운"기능이 아니지만 드 rare니다.

추측 한 바와 같이, 이름이 지정된 참조로 글로벌 스코프에 액세스하는 것이 최상의 솔루션이 아닙니다. 어떤 사람들은 이것을 "글로벌 범위 오염원"이라고 부릅니다. 우리는 그 이유를 탐구 할 것이지만, 먼저 ... querySelector("#cool") getElementById("cool") 일부 배경 이 방법은 HTML 사양에 설명되어 있으며 "창 객체에 대한 이름의 액세스"로 설명합니다.

인터넷 익스플로러는이 기능을 구현하는 최초의 브라우저입니다. 다른 브라우저 에서이 기능이 추가되었습니다. 당시 Gecko는 표준 모드에서 직접 지원하지는 않았지만 실험 기능으로 사용하기로 선택한 유일한 브라우저였습니다. 사람들은 그것을 구현하는 것에 대해 주저했지만 브라우저 호환성을 위해 결국 발전했습니다 (Gecko는 WebKit이 표준 모드에서 제거하도록 설득하려고 시도했습니다). 결국 Firefox 14에서 표준 모드에 들어갔다.

var el = querySelector("#cool");

아마도 잘 알려지지 않은 것은 브라우저가 생성 된 글로벌 변수가 웹 페이지를 손상시키지 않도록하기 위해 몇 가지 예방 조치 (다양한 수준의 성공)를 취해야한다는 것입니다. 조치 중 하나는 ...

입니다 가변 폐색 이 기능의 가장 흥미로운 부분은 명명 된 요소 참조가 기존의 글로벌 변수를 모호하게하지 않는다는 것입니다. 따라서 DOM 요소의 ID가 글로벌 변수로 정의되면 기존 변수를 덮어 쓰지 않습니다. 예를 들면 : #cool

window[ELEMENT_ID] <:> 슈퍼 베르사 :

이 동작은

와 같은 위험한 적용 범위를 제거하기 때문에 중요합니다., 그렇지 않으면 경보 API를 무효화하여 충돌이 발생합니다. 이 보호 기술은 아마도 당신이 (당신이 나와 같다면) 먼저 배우는 이유 일 가능성이 높습니다. 지연에 대한 기사 나는 이전에 이름이 지정된 글로벌 요소를 참조로 사용하는 것이 최상의 솔루션이 아닐 수 있다고 말했다. 여러 가지 이유가 있으며 TJ Vantoll은 그의 블로그에서 이것에 대해 자세히 설명했으며 여기에 요약 할 것입니다 :

.

DOM이 변경되면 참조도 변경됩니다. 이로 인해 코드는 매우 "연약한"(사양의 용어)을 매우 중요하게 만들고 HTML과 JavaScript 간의 문제가 너무 엄격 할 수 있습니다.

우발적 인용이 너무 쉽습니다. 간단한 오타는 이름이 지정된 글로벌 변수를 참조하고 예상치 못한 결과를 제공합니다.
• 구현 방법은 브라우저에 따라 다릅니다. 예를 들어 는 ID (예 : <a> )가있는 앵커에 액세스 할 수 있지만 일부 브라우저 (예 : Safari 및 Firefox)는 콘솔에서 참조 오류를 반환합니다. </a> 결과가 발생할 것이라고 생각하는 것을 반환하지 않을 수 있습니다. 사양에 따라 DOM에 동일한 명명 된 요소의 여러 인스턴스가있는 경우 (예 : 2 <div> 인스턴스) 브라우저는 이러한 인스턴스의 배열을 포함하는 htmlcollection을 반환해야합니다. 그러나 Firefox는 첫 번째 인스턴스 만 반환합니다. 다시, 사양은 요소 트리에서 ID 인스턴스를 사용해야한다고 명시합니다. 그러나 그렇게하는 것은 페이지가 작동하는 것을 막을 수는 없습니다. <li> 가능한 성능 비용? <the> 내 말은, 브라우저는 해당 참조 목록을 작성하고 유지해야합니다. 일부 사람들은 지명 된 글로벌 변수가 실제로 한 번의 테스트에서 더 잘 수행되고 최근 테스트에서는 더 잘 수행되는 Stackoverflow 스레드에서 테스트를 실행했습니다. <strong> </strong> <utions> 기타 예방 조치 </utions></the> </li> <ab> 우리가 지명 된 글로벌 변수의 사용에 대한 비판을 포기하고 계속 사용한다고 가정합니다. 모두 제일 좋다. 그러나이 일을 할 때 고려해야 할 몇 가지 사항이 있습니다. <li> polyfills <strong> <e>는 극단적으로 들릴지 모르지만 이러한 유형의 글로벌 검사는 폴리 플릴의 일반적인 설정 요구 사항입니다. 다음 예제를 확인하십시오. 새로운 Cookiestore API를 사용하여 쿠키를 설정하여 아직 지원하지 않는 브라우저에서 폴리 플릴을 설정합니다. </e></strong> <fine fine>이 코드는 크롬에서 잘 작동하지만 Safari에서는 다음과 같은 오류가 발생합니다. <code><a></a> 글을 쓰는 시점에서 Safari는 Cookiestore API를 지원하지 않습니다. 따라서 IMG 요소 ID가 Cookiestore Global 변수와 충돌하는 전역 변수를 생성하기 때문에 PolyFill은 적용되지 않습니다.
javaScript API 업데이트 우리는 상황을 변경하고 다른 문제를 찾을 수 있습니다. 즉, 브라우저의 JavaScript 엔진에 대한 업데이트는 명명 된 요소의 전역 참조를 중단 할 수 있습니다.
• 예 : 이 스크립트는 입력 요소를 참조하고 초점 ()을 호출합니다. 잘 작동합니다. 그러나 우리는 그것이 얼마나 오래 작동할지 모릅니다. <div><that> 브라우저가 BarcodeDetector API를 지원하기 시작하면 입력 요소를 참조하는 데 사용하는 글로벌 변수가 작동을 중지합니다. 당시 Window.barcodedetector 글로벌 변수는 더 이상 입력 요소에 대한 참조가 아니며 .focus ()는 "wind <p> </p> 결론 <ar> 우리 가이 시점에 어떻게 도착했는지 요약 해 보겠습니다 <h3> <ows> 모든 주요 브라우저는 ID (또는 경우에 따라 이름 속성)를 사용하여 각 DOM 요소에 대한 전역 참조를 자동으로 생성합니다. </ows> </h3> <el> 글로벌 참조를 통해 이러한 요소에 액세스하는 것은 신뢰할 수 없으며 위험 할 수 있습니다. 대신 <or> 또는 <p>를 사용하십시오. </p> <ences> 글로벌 참조가 자동으로 생성되므로 코드에 약간의 부작용이있을 수 있습니다. ID 속성을 필요로하지 않는 한 ID 속성을 사용하지 않는 좋은 이유입니다. <ul> <li> 궁극적으로 JavaScript에서 명명 된 글로벌 변수를 사용하지 않는 것이 가장 좋습니다. 나는 사양이 "연약한"코드를 일으키는 것에 대해 말한 내용을 앞서 인용했지만 다음은 이것을 강조하는 전문입니다. </li> <r> 일반적으로 말하면, 이것에 의존하면 깨지기 쉬운 코드로 이어질 것입니다. 예를 들어 새로운 기능이 웹 플랫폼에 추가되므로 시간이 지남에 따라 결국이 API에 매핑 될 수있는 ID. 이 작업을 수행하지 마십시오. <li> <code>querySelector 나는 HTML 사양 자체 가이 기능을 피하는 것이 모든 것을 말하는 것을 제안한다고 생각합니다. getElementById