Как сделать короткую функцию для forEach?

Question

[Анастасия]

Здравствуйте.
1. Я не хочу использовать jQuery, но мне нужна от туда фишка с применением параметров на массив объектов (простите, если неправильно использовала термины).

Я имею в виду это $(".block").addClass("red")
И если есть несколько объектов с классом block, то применится addClass для всех объектов. В чистом JS я делаю это так:

document.querySelectorAll(".block").forEach((el)=> {
    el.classList.add("red");
});

Подскажите, как быть с функцией, которая бы делала forEach?
Я просто не совсем могу сообразить, как такое сделать. Вот так не работает (ну и не должно)

function qsf(e) {
        return
	document.querySelectorAll(e).forEach((el)=> {
		el
	})
}

2. На данный момент я себе сделала 2 функции

function q(e){return document.querySelector(e)}
function qs(e){return document.querySelectorAll(e)}

И теперь обращаюсь через q и qs соответственно. Так на много удобнее и короче получается.
Вопрос: насколько это правильное решение? Не замедляю ли я таким образом код? Ведь я заставляю его постоянно вызывать функцию. Может быть это как-то сказывается на ОЗУ?

3. Почему раньше, когда я видела js код, постоянно писали getElementById или getElementsByClassName, а не использовали querySelector, ведь так намного проще? Там же можно обратиться и по ID и по Class. Просто для меня, когда я первый раз столкнулась с кодом, лет 5 назад, это было аргументом для того, чтобы использовать jquery. Там только знак доллара, а здесь пипец какой-то. А теперь оказывается, что есть querySelector.

P.S.
getElementsByClassName я видела как раз в таком виде:

document.getElementsByClassName("block").forEach((el)=> {
    el.classList.add("red");
});

и меня это пугало, так как можно было сделать $(".block").addClass("red");

Comments

[Ярослав Иванов]

[Ярослав Иванов]

Может быть это как-то сказывается на ОЗУ?

На целых несколько байт.

[Ярослав Иванов]

Еще есть старый добрый document.evaluate("//h1", documen.body, null, XPathResult.ANY_TYPE, null);

Answer 1

[Владимир Проскурин]

Вопрос: насколько это правильное решение? Не замедляю ли я таким образом код? Ведь я заставляю его постоянно вызывать функцию. Может быть это как-то сказывается на ОЗУ?

Если функция вызывается не сотни/тысячи раз в секунду, то не критично. Такие микропотимизации не должны плохо влиять на качество кода. Разница скорости выполнения будет в пределах погрешности.

Почему раньше, когда я видела js код, постоянно писали getElementById или getElementsByClassName

Так делали тогда, когда была плохая поддержка браузерами. И даже на данный момент с ней есть проблемы, например, NodeList который querySelectorAll возвращает, в старых браузерах не имеет метод forEach. Поэтому часто добавляют полифил или преобразуют NodeList в массив, который уже имеет forEach.

Подскажите, как быть с функцией, которая бы делала forEach?

Функция должна принимать либо другую функцию
qsf('.elements', el => el.classList.add("red"));

либо она должна внутри себя в замыкании хранить ссылку на список элементов, и возвращать публичные методы, которые будут производить операции над этими элементами (как такое написать, попытайтесь сами разобраться, если проходили тему с замыканиями).
qsf('.elements').addClass('class-name');

Answer 2

[Евгений]

1. Зачем там return, если функция не должна вам ничего возвращать, а просто навесить классы?

function qsf(e) {
  document.querySelectorAll(e).forEach((el)=> {
    el.classListt.add('red');
  })
}

2. В данном случае разница в районе погрешности) вы просто добавляете в память информацию о функции

3. Хз)

Comments

[Анастасия]

я classList имела в виду для примера. На деле я хочу именно иметь возможность что-то делать с массивом. То есть получить способности того же $("element")

[Евгений]

Анастасия, наверно это надо рыть в сторону итераторов... но я с ними не знаком...

[Ярослав Иванов]

Анастасия,
https://github.com/space2pacman-misc/YarQuery
https://github.com/space2pacman-misc/YarQuery/blob...
https://github.com/space2pacman-misc/YarQuery/blob...