querySelector и нулевой элемент

Курсы JavaScript в браузере
1

Скажите, а почему в теме “Я иду искать” (и в других, впрочем), строка

var specialProduct = document.querySelector(’.product:nth-child(0)’);

выводит в консоль
console.log(specialProduct);

null ?

2

А разве это корректный css-селектор?

3

ой да, дошло. Нулевой элемент - это для начала отсчёта в скрипте. А в в html -селекторах считаем по человечески - от еденицы.
но мне теперь непонятна вот такая фраза из урока Найти всех до единого:
for (…) {
var product = querySelector(’.product:nth-child(’ + i + ‘)’);
}
" Метод querySelector устроен так, что всегда возвращает только первый найденный элемент. Поэтому на каждой итерации приходилось бы запускать поиск очередного элемента по DOM-дереву. Такой поиск — довольно дорогая операция."

но разве цикл по любому не запускает поиск очередного элемента на каждой итерации?
вообщем, я не понимаю, почему вариант

for (var i =1; i <= catalogData.length; i++){
var elmnt = document.querySelector(’.product:nth-child(’ + i + ‘)’);
elmnt .classList.add(‘product–available’);
}

хуже варианта

var elements = document.querySelectorAll(’.product’);
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.classList.add(‘product–available’);
}

если результат получается один и тот же.
и что значит " Намного оптимальней получить список всех элементов до цикла ," - то есть получить список элементов массива? Но что значит и какой смысл в списке элементов массива, если массив и есть уже упорядоченный э-э-э-э список любых элементов?

4

ответ прост - querySelector это нативная функция JS. она затрачивает много ресурсов для своего выполнения.
вложенная в цикл функция жрет еще больше. поэтому умные разрабы JS добавили новую функцию для поиска всех селекторов сразу.
собственно зачем добавлять новую функцию? чтобы упростить код, а пользователи браузеров не задавались вопросом: “почему мой Хром опять сожрал всю оперативку на компе?”.

1 лайк
5

ага, спасибо. А можно ещё вопросик:
правильно ли объявлять в теле цикла переменную?
"var updateCards = function (products) {
…
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var product = products[i];
…}
"
это ведь значит. что на каждой итерации будет опять создаваться переменная? может. переменные надо объявлять вне цикла?

6

Нет. Почитайте, как на самом деле работает цикл for.

7

мм… для циклов лучше все же использовать let
касаемо вашего примера имхо пофиг.
вот тут целая простыня с примерами: