Как реализовать объект с методами, которые можно было бы вызывать последовательно?

Question

[ZaxapKramer]

Как реализовать подобную функцию

get.id("main").class("selector")[0].tag("span")[0];

заместо

document.getElementById("main").getElementsByClassName("selector")[0].getElementsByTagName("span")[0];

?

Это, вроде бы несложно, но не до конца понимаю, как сделать не
get.id().get.class().get.tag()
а как-то вызывать методы последовательно после (в данном случае) get.

Заранее благодарю за помощь и прошу прощения за "кривое" описание проблемы.

Answer 1

[display: block]

https://learn.javascript.ru/task/chain-calls

Answer 2

[Сергей Протько]

Возможно вам стоит конкретизировать пример, поскольку то что вы хотите проще делать так:

var el = document.querySelector('#id .selector span:first-of-type')

Comments

[ZaxapKramer]

Проще - это да, но вот именно ссылка на "Цепочку вызовов" из первого ответа немного заполняет мои пробелы в постижении js, как такового (имеется еще несколько решений, которым бы не помешал . В добавок к этому (возможно, потому что наркоман и "люблю" изобретать свои "удобные велосипеды", а также верю, что querySelector медленнее старого доброго getElement*) мне неудобно использовать querySelector(All) в определенных ситуациях:)

[display: block]

ZaxapKramer: А ещё можно регуляркой, например, добиться того, чтобы ('#main selector span:first-of-type') превратился бы в такую цепочку

document.getElementById("main").getElementsByClassName("selector")[0].getElementsByTagName("span")[0];

внутри метода

[Антон]

ZaxapKramer: сейчас не 2007, чтобы беспокоиться о такого рода быстродействии, тем более, что элемент присваивается переменной один раз.