getElementBy... ...destructuring

I've always wondered how verbose and cumbersome some very common web constructions are. One of this is getElementBy..., which is used as a central interface between Javascript and HTML const myElement = document.getElementById("demo"); myElement.style.color = "red"; This are 81 bytes pure text plus one constant in the global namespace, just to change a color. You can also write this as a oneLiner: document.getElementById("demo").style.color = "red" still 52 bytes used.... You can also use document.getElementsByClassName() document.getElementsByName() document.getElementsByTagName() holy shit, what a waste of bandwidth. Not only that the command is lengthy, it forces you to define an ID and a variable. And how do you know, that "myElement" and "demo" refer to the same element? Is this programming or a shell game? And - this is javascript used in a browser. You not only need to write it, each letter also has to be transferred over the internet. They could have used something smarter like