Question

I’ve always had to use a selector to get elements in the DOM so I could retrieve the data that I need. eg:

var test1 = document.getElementById('testElement').value; // or
var test2 = document.querySelector('#testElement').value; // or
var test3 = $('#testElement').val(); // etc...

Recently, I noticed that I no longer need to do that. Instead, simply using the element’s id seems to be sufficient. It seems to be used as a reference to the element. The code below works for me in Chrome, Firefox and even IE9.

var test4 = testElement.value;

I’ve been trying to find some more information on this but wherever I look, everyone says that selectors need to be used.
So either my colleagues and I completely missed this somehow, or not many people know about this. Or, I suppose, I’m horrible at searching for information.

Basically, I’m looking for more information on this.

So please point me in the right direction so I can investigate further and make sure this functionality is here to stay and can be used consistently.

Answer 1

This is a browser feature, which is not according to the specification. This means that for your code to work on most browsers, it should be using some selector. Also, testElement may not work if it already is a global variable.