getElementById 대신 그냥 ID명만 쳐서 활용

Question

사실 오래전부터 알고 있긴했는데, 특정 태그에 대한 정보 가져올때, document.getElementById('id명') 이렇게 불러오는 걸로 알고 있었는데, 사실 개발하다가, 그냥 id명 만쳐서 변수처럼 사용할 수 있더라고요. 예를들면

Hello World

라는 태그가 있을때 Hello World 값을 불러올려면document.getElementById("test").innerText; 라고 불러오는게 정석같은데,단순하게 test.innerText라고 쳐도 동일한 결과가 나오던데 이거 혹시 옛날 브라우저에서는 지원하지 않는 기능인가요? 아니면 이런식으로 사용하면 나중에 문제될게 있을까요?

jghjghjg · Answer

&#96;id&#96;명을 직접 변수처럼 사용하는 것은 자바스크립트에서 오래된 기능입니다. 이는 &#96;window&#96; 객체에 &#96;id&#96;값을 기반으로 자동 참조를 생성하기 때문에 가능한 것입니다. 그래서 &#96;test.innerText&#96;는 사실상 &#96;window.test.innerText&#96;와 같은 의미입니다.하지만 이 방식에는 여러 문제점이 있습니다:1. **호환성 문제**: 이 기능은 모든 브라우저에서 동일하게 작동한다는 보장이 없습니다. 특히 오래된 브라우저나 몇몇 모바일 브라우저에서는 제대로 작동하지 않을 수 있습니다. 2. **가독성**: 코드를 읽는 사람이 &#96;test&#96;가 어디서 왔는지 알 수 없을 수 있습니다. 이는 특히 큰 프로젝트나 다른 개발자와 함께 작업할 때 문제가 될 수 있습니다. 3. **명확성**: 만약 &#96;window&#96; 객체에 &#96;test&#96;라는 다른 속성이나 메서드가 있다면, 의도하지 않은 동작이 발생할 수 있습니다. 4. **유지보수**: 코드의 유지보수가 어려워질 수 있습니다. 나중에 &#96;id&#96; 값을 변경하게 되면, 직접 참조하는 방식을 사용한 코드는 오류를 발생시킬 수 있습니다.따라서, 이 방식은 피하는 것이 좋습니다. &#96;document.getElementById(&#34;id명&#34;)&#96;와 같은 방식이 좀 더 명확하고 안정적이기 때문에 권장됩니다.Ai 느님에게 다시 물어봤습니다

Long_LeHwa · Answer

찾아보니까 ID로 태그를 만든걸 활용하면 이건 전역 스코프에서 동작한다네요. 다시 말하자면 만약에 tag의 ID랑 동일한 변수명을 쓰는 lib나 js코드가 있다면 충돌이 날 수도 있다고 해요.

getElementById 대신 그냥 ID명만 쳐서 활용

2개의 답변

기술 목록