Create shorter versions of the access to DOM elements

💡 Ideas
1

tag("body") // the same as document.getElementsByTagName("body")[0]

tag("div", 2) // the same as document.getElementsByTagName("div")[1]

tags("body") // the same as document.getElementsByTagName("body")

class("className") // the same as document.getElementsByClassName("className")[0]. Yes, I know, that the word "class" is already reserved, but you can make a distinction between "class" and "class()"

classes("className") // the same as document.getElementsByClassName("className")

id("coolID") // the same as document.getElementById("coolID")

tag("div").tag("span", 2) // the same as document.getElementsByTagName("div")[0].getElementsByTagName("span")[1]

tag("div").class("className") // the same as document.getElementsByTagName("div")[0].getElementsByClassName("className")[0]

2

The DOM isn’t part of the language (what this discourse is for), it’s part of the HTML spec.

3

The DOM API won't add any more unnecessary globals. You can write these shortcuts yourself with a tiny helper function based on document.querySelector:

const sel = document.querySelector.bind(document);
const all = document.querySelectorAll.bind(document);

sel("body") // the same as document.getElementsByTagName("body")[0]
sel("div:nth-of-type(2)") // the same as document.getElementsByTagName("div")[1]
all("body") // the same as document.getElementsByTagName("body")
sel(".className") // the same as document.getElementsByClassName("className")[0].
all(".className") // the same as document.getElementsByClassName("className")
sel("#coolID") // the same as document.getElementById("coolID")
sel("div span:nth-of-type(2)") // the same as document.getElementsByTagName("div")[0].getElementsByTagName("span")[1]
sel("div .className") // the same as document.getElementsByTagName("div")[0].getElementsByClassName("className")[0]

(there are minor semantic differences, but in all comparisons DOM selectors win)

4

Yes, I can, but it slows down the development. I often write javascript programs in the console of the Developer Tools in browser, and I am doing it from scratch. It would be a big waste of time to always copy-paste some code before writing a new program or testing some new idea. So, no "sel('div')", but "document.getElementsByTagName('div')[0]" just for the sake of time. But it would be even more quickly, if I could just type "tag('div')".

5

If you are writing in the devtools console, you can use $(…) or $$(…).

6

This is what libraries are for. Write your own library.