Why can I access elements inside forms without using getElementById ()?

Question

This strange behavior was discovered today. If I had the following HTML:

<form> <h1 id="test">Test</h1> </form> 

Why does this JS work:

 console.log(test); // This outputs the <h1> element. // Why does this work? Shouldn't `test` be undefined? 

I have not declared test yet. This behavior is observed only for elements inside the <form> .