Реализация метода "$()" jQuery на чистом JavaScript

9:53 11.06.2017
Я уже затронул тему о методах jQuery на чистом JavaScript тут продолжу, но тут буду писать только про функцию $() или jQuery(). Это попытка сделать аналогичную функцию, как в jQuery, но не используя код jQuery. На самом деле эта очень удобная функция, она избавляет веб программистов каждый раз писать функции: getElementById, getElementsByClassName и getElementsByTagName.

Зачем это надо, спросите вы? Ведь можно просто подключить библиотеку или в крайнем случае, скопировать с файла кусок кода не изобретать велосипед. А я отвечу - это делаю для своей и возможно вашей практики. Давайте попрактикуемся?!

Предлагаю не использовать символ доллара, как это сделано в jQuery, а придумать свое название функции, например, Job. Насколько мне известно, метода с таким названием в JS нет, пусть будет у нас. И начнем с простого, создадим функцию, которая будет взаимодействовать с одним из элементов всего документа, подключаться к элементу будем по его id. Делаем так:
var Job = function(e) {
    return document.getElementById(e);
};

Теперь нашу функцию можно вызывать так: Job('id'), пример:
Job('block').innerHTML = 'Проба';

В блоке с id="block" появится строка Проба.

Продолжаем разговор! Выше наша функция может работать только с элементами, которые имеют атрибут id, но ведь документ может иметь элементы и с атрибутами class или вообще их не иметь. Значит надо расширять нашу функцию, что я собственно и собираюсь делать. Я добавил проверку первого символа, если первый символ будет решетка (#), значит работаем с тегом с атрибутом id, если первый символ точка (.), значит работаем с тегом с атрибутом class, а если нет ни решетки, ни точки, значит работаем по названию тега.

Я заменил функцию getElementById на querySelector, для работы с тегами, которые с атрибутами id и class, а так же добавил функцию getElementsByTagName, для работы с элементами по названию тега. Вот, что у меня получилось:
var Job = function(e) {
    switch (e[0]) { // Получаем первый символ строки
        case '#': // Если первый символ решетка ("#"), значит работает с элементом по "id"
        case '.': // Если первый символ точка ("."), значит работает с элементом по "class"
            return document.querySelector(e);
        break;

        default: // Если нет ни решетки, ни точки, значит работаем с тегом
            return document.getElementsByTagName(e)[0];
        break;
    };
};

Название тега, так же, как и тег с атрибутом class, берется первый найденный в документе. Работу можно проверить так:
Job('#block').innerHTML = 'Блок с id="block"';
Job('.block').innerHTML = 'Блок с class="block"';
Job('span').innerHTML = 'Тег span';

Элементы для теста работы функции:
<div id="block"></div>
<div class="block"></div>
<span></span>
16:26 29.07.2018
Я тут подумал, зачем нам проверять первый символ передаваемого значения, ведь функция querySelector сама может определить, что ей передают, идентификатор, класс или тег, но эта функция работает только с первым найденным элементом, а нам надо со всеми, как в jQuery, по этому будем использовать функцию querySelectorAll:
var Job = function(val) {
	return document.querySelectorAll(val);
};

Но, если нам потребуется работать с элементом по идентификатору, то есть с одним единственным тегом (id="xxx"), то нам потребуется помощь функции querySelector, либо getElementById, значит проверка первого символа все же необходима. Я сделал так:
var Job = function(val) {
	if (val[0] == '#') {
		return document.querySelector(val);
	}
	else {
		return document.querySelectorAll(val);
	};
};

И этого пока хватает.