자바 스크립트에서 ID로 이름을 선택하는 방법은 무엇입니까?

Question

내가 가진 말 : 코드에서

test1 

:

<div id='test1'></div> 

내가 단순히 그것을 참조 할. 대신 :

document.getElementById('test1'); 
$('#test1') // if in jquery 

그리고 나는 일반적인 솔루션을 찾고 있어요 window.test1 = $('#test1'); 싶지 않아요. init에 함수를 사용하여 모든 ID를 반복 할 수 있지만 프로그램 전체에서 dom 요소가 동적으로 만들어지면 어떻게 될까요? DOM 요소를 추가 할 때마다 ID를 윈도우에 할당하는 함수를 실행하고 싶지 않습니다.

test1(및 모든 ID는 페이지에 있음)은 항상 창 개체의 일부가되고 싶습니다. 기본적으로. 이것을 할 수있는 방법이 있습니까? 누군가가 존재하지 않는 윈도우 객체에 접근하려고 할 때 코드를 삽입하는 방법이있는 것처럼, 그 코드는 명시 적으로 쓰지 않고도 document.getElementById을 수행 할 것입니다.

Answer 1

첫 번째 질문은 DOM과 (과) 관련이 있습니다. 자바 스크립트가 아닙니다. 둘째로, 아닙니다. 현재 표준으로는이를 달성 할 방법이 없습니다. 물론 셀렉터를 변수에 할당하고 다시 사용할 수 있습니다.

Answer 2

dom 액세스를 속성 조회로 변환하는 Proxy을 만들 수 있습니다.

const dom = new Proxy(window, { 
    get(_, name) { 
     return document.getElementById(name); 
    } 
}); 

dom.test1.style.position = "static"; // tada 

참고 : 실제로 그래서 기술적으로 당신의 ID를 실제로 이미 전역 변수로 (적어도 크롬에서) 노출이

Answer 3

하지 않습니다. 콘솔을 열고 ID 중 하나를 입력 해보십시오. 그러나 이것에 의존하는 것은 매우 나쁜 생각입니다.

window이라는 요소가있는 시나리오를 생각해보십시오. 글로벌 window 개체와 충돌하기 때문에 글로벌로 노출되지는 않습니다.

DOM에 액세스 할 때 명백한 이유가 있습니다. DOM을 액세스 할 때인지하는 부담을 줄이려면 나중에 더 잘 이해할 수있을 것입니다.

Answer 4

당신은 jQuery를에 창 변수를 설정할 수 있습니다 : -

function (elem) { 
    window['id_' + elem.attr('id')] = elem; 
} 

elem($("#test1")); 

매번 동적 요소가 생성 창 변수를 추가하는 일반적인 함수를 만듭니다. 하지만 동적 변수가 생성되는 함수를 어떻게 든 호출해야합니다.