# Create shorter versions of the access to DOM elements

**URL:** <https://es.discourse.group/t/create-shorter-versions-of-the-access-to-dom-elements/625>\
**Category:** 💡 Ideas\
**Created:** [January 27, 2021, 2:30pm UTC](https://es.discourse.group/t/create-shorter-versions-of-the-access-to-dom-elements/625 "2021-01-27T14:30:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jaroslav.tavgen](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/jaroslav.tavgen/32/2732_2.png) [@jaroslav.tavgen](https://es.discourse.group/u/jaroslav.tavgen)\
**Post date:** [January 27, 2021, 2:30pm UTC](https://es.discourse.group/t/create-shorter-versions-of-the-access-to-dom-elements/625/1 "2021-01-27T14:30:14Z")

</div>

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]

---

<div class="post-metadata">

**Author:** ![ljharb](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/ljharb/32/8_2.png) [@ljharb](https://es.discourse.group/u/ljharb)\
**Post date:** [January 27, 2021, 3:23pm UTC](https://es.discourse.group/t/create-shorter-versions-of-the-access-to-dom-elements/625/2 "2021-01-27T15:23:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bergus](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/bergus/32/152_2.png) [@bergus](https://es.discourse.group/u/bergus)\
**Post date:** [January 27, 2021, 8:51pm UTC](https://es.discourse.group/t/create-shorter-versions-of-the-access-to-dom-elements/625/3 "2021-01-27T20:51:08Z")

</div>

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`](https://developer.mozilla.org/en-us/docs/Web/API/Document/querySelector):

```javascript
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)

---

<div class="post-metadata">

**Author:** ![jaroslav.tavgen](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/jaroslav.tavgen/32/2732_2.png) [@jaroslav.tavgen](https://es.discourse.group/u/jaroslav.tavgen)\
**Post date:** [January 28, 2021, 3:35pm UTC](https://es.discourse.group/t/create-shorter-versions-of-the-access-to-dom-elements/625/4 "2021-01-28T15:35:06Z")

</div>

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')".

---

<div class="post-metadata">

**Author:** ![bergus](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/bergus/32/152_2.png) [@bergus](https://es.discourse.group/u/bergus)\
**Post date:** [January 28, 2021, 6:27pm UTC](https://es.discourse.group/t/create-shorter-versions-of-the-access-to-dom-elements/625/5 "2021-01-28T18:27:17Z")

</div>

If you are writing in the devtools console, you can use [`$(…)`](https://developers.google.com/web/tools/chrome-devtools/console/utilities#queryselector) or [`$$(…)`](https://developers.google.com/web/tools/chrome-devtools/console/utilities#queryselectorall).

---

<div class="post-metadata">

**Author:** ![anonyco](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/anonyco/32/277_2.png) [@anonyco](https://es.discourse.group/u/anonyco)\
**Post date:** [February 2, 2021, 11:42pm UTC](https://es.discourse.group/t/create-shorter-versions-of-the-access-to-dom-elements/625/6 "2021-02-02T23:42:18Z")

</div>

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