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

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

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

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

null ?

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

ой да, дошло. Нулевой элемент - это для начала отсчёта в скрипте. А в в 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’);
}

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

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

1 Симпатия

ага, спасибо. А можно ещё вопросик:
правильно ли объявлять в теле цикла переменную?
"var updateCards = function (products) {

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

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

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