To set styles for all elements with a .box class on jQuery, it’s enough to write the following:

 $('.box').css('background', 'red');

How to implement the same on pure JS? Here is my not quite successful attempt:

 function $(selector) { var prefix = selector[0]; var selector = selector.substring(1); switch (prefix) { case '#': return document.getElementById(selector); case '.': var elem = document.getElementsByClassName(selector); for (var i = 0; i < elem.length; i++) { return elem[i]; }; default: return document.getElementsByTagName(prefix + selector); } } $('.box').style.background = 'red'; 
 <div> <p class="box">hello</p> <p>world</p> <p class="box">000</p> <p>111</p> </div>

The styles applied only to the first element with the .box class, although I return these elements from the loop ...

JS in the process of learning, so please do not strongly "scold" me))

  • doing return you leave the function, in this case the function $ - Grundy
  • Look here: javascript.ru/unsorted/top-10-functions#8-getelementsbyclass - andy.37
  • 2
    It should be done by analogy with jQuery and keep a list of selected items inside, providing access to them using functions - Grundy
  • return elem [i]; Returns only the first item. - ilyaplot

2 answers 2

This function returns too different results:

single item or collection of items.

Because of this, you need to either ensure that the result is treated depending on the type, or hide it inside by exposing the necessary functions to work with the selected elements.

In addition, the problem with this code is that the usual return cannot pause the execution of the loop, and then continue with it; using return , a full return from the function occurs, so all other elements are lost.

If we take jQuery as a basis, then it’s worth seeing how it’s done.

the list of elements is stored inside, and by and large access to it is carried out through functions.

The simplest version can be implemented like this:

 (function(window) { var my = function(selector) { return new my.fn.init(selector); } my.prototype = my.fn = { version: '0.0.1', constructor: my }; //выбираем элементы var init = my.fn.init = function(selector) { this.context = Array.from(document.querySelectorAll(selector)); //всегда имеем массив элементов } init.prototype = my.fn; my.fn.css = function(cssProperty, cssValue) { // добавляем метод для работы с css this.context.forEach(function(el) { el.style[cssProperty] = cssValue }); return this; } return window.my = my; }(window)); my('.box').css('background', 'red'); 
 <div> <p class="box">hello</p> <p>world</p> <p class="box">000</p> <p>111</p> </div>

    For example, like this:

     var box = document.querySelectorAll('.box'); for (var i = 0; i < box.length; i++) { box[i].style.background = 'red'; } 
     <div> <p class="box">hello</p> <p>world</p> <p class="box">000</p> <p>111</p> </div>

    • Thank you. But this is an obvious solution, which is also not rational, since cluttering up the main code. The task is to put this into the $ () function. While studying the information from the comment @ andy.37 ... I hope that I will find the answer there. - Astor
    • @Astor What is the essence of cluttering something? Well, do var $ = document.querySelectorAll , if you like. - Athari
    • @Astor, this is, by the way, a fairly rational decision, at least the parsing of the selector is transferred to the native part - Grundy
    • @Discord, I suspect that I don’t like the open loop in the code - Grundy
    • @Discord, the essence of littering in a loop. If the document has only the class .box, then everything is good, and if there are other classes? - then there will be duplication of code. Besides, the question was: "selection of elements on pure JS". I admit that I am wrong)) - Astor