Why/how is each div with an `id` callable from js?

Question

While coding some js for a webpage, I had initially written a function to parse every div with an id and assign it to a variable for easy targeting:

var div={};
for (let e of Array.from(document.getElementsByTagName('div'))
   .filter(div => div.id)) {
      div[e.id] = e;
};

But while debugging I suddenly realized that js recognized all these divs "out of the box" and that I could call them directly. For example, if my HTML contains

    <div id='status'>
        <div id='modtime'></div>
        <div id='client'></div>
    </div>

Then I can simply do modtime.innerText='abc' – without having to assign modtime via something like div.modtime = document.getElementById('modtime')

Would like to know more about this 'functionality'; cannot find any documentation on it. Not sure what it's called.