Dom id를 script에서 변수로 접근

예를 들어서 <div id="test"></div> 라는 dom이 있다면
저는 지금까지 document.querySelector("test"); 나 document.getElementById("test"); 로 dom을 얻어왔는데
그냥 console.log(test); 를 했는데 dom이 찍히더라구요…
이게 원래 가능한 방법이였나요…?

지양하는 방법이라 잘 알려져 있지 않을 뿐, 원래 되던 거라고 합니다.

근거는 아래와 같습니다.
https://html.spec.whatwg.org/#named-access-on-the-window-object

이 링크의 글에서도

As a general rule, relying on this will lead to brittle code. Which IDs end up mapping to this API can vary over time, as new features are added to the Web platform, for example. Instead of this, use document.getElementById() or document.querySelector() .

질문에서 언급하신 함수들을 사용하라고 권고하고 있네요.

Element가 DOM Tree에 추가되는 시점에 혹은 이미 DOM Tree에 있는 Element에 id를 부여하는 시점에,
window객체에 그 id값을 속성 이름으로 하여 해당 엘리먼트가 값으로 추가 됩니다.

var div = document.createElement('div');
document.body.appendChild(div);
div.id = 'hello';
console.log(hello, window.hello, window['hello']);

당연하지만,
추가된 id값이 자바스크립트의 문법 오류가 날 만한 문자를 포함하고 있으면 bracket notation으로만 속성 접근이 가능합니다.

// 만약 id="hi-bye" 라면,
console.log(hi-bye); // error
console.log(window.hi-bye); // error
console.log(window['hi-bye']); // ok

그리고 보통 그렇게 사용하지 않지만,
마크업 및 자바스크립트의 DOM API로 같은 id를 가진 엘리먼트를 여러개 생성할 수는 있습니다.
이 경우 id값을 접근하면 id값으로 지정된 모든 Element를 컬렉션으로 담아 반환합니다.(HTMLCollection)

var div1 = document.createElement('div');
div1.id = 'mama'; // 먼저 ID를 부여하든
document.body.appendChild(div1);
    
var div2 = document.createElement('div');
document.body.appendChild(div2);
div2.id = 'mama'; // 나중 부여하든 window 객체에 추가되는 것은 같으며,

// 컬렉션으로 반환합니다.
console.log(mama); // HTMLCollection(2) [div#mama, div#mama, mama: div#mama]