Почему не работает querySelectorAll(...).classList.add(...)?

Question

[Mykhailo]

В html есть шаблон для копирования тег template в нем список ul > li, хочу добавить для li class через classList.add

<template id="map-card">
             <article>
				<ul class="popup__features">
					<li class="feature"></li>
				</ul>
            </article>
            <div class="ava-button">
                <button style="left: 200px; top: 400px;" class="map__pin"><img src="img/avatars/user05.png" width="40" height="40" draggable="false"></button>
            </div>
    </template>

var similarCardElement = document.querySelector('.map');
var cardTemplate = document.querySelector('#map-card')
    .content
    .querySelector('.map__card');

var cardElement = cardTemplate.cloneNode(true);

cardElement.querySelectorAll('ul li.feature').classList.add('feature--wifi');

similarCardElement.appendChild(cardElement);

Comments

[Диман Суворкин]

Покажи код

[Mykhailo]

Диман Суворкин, загрузил код

Answer 1

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

querySelectorAll возвращает не элемент, а коллекцию элементов NodeList. Если нужно изменить один элемент, то используйте querySelector. Если много, проходите эти элементы в цикле и добавляйте класс.

Comments

[Mykhailo]

элементов будем много, использовать querySelectorAll ?

[Виталий Першин]

Mykhailo, да, нужно использовать querySelectorAll и обходить каждый элемент циклом

[Mykhailo]

Дальше не могу сообразить, помогите пожалуйста

<ul class="popup__features">
	<li class="feature"></li>
	<li class="feature"></li>
	<li class="feature"></li>
	<li class="feature"></li>
	<li class="feature"></li>
	<li class="feature"></li>
</ul>

var featuresArray = ['feature--wifi', 'feature--dishwasher', 'feature--parking', 'feature--washer', 'feature--elevator', 'feature--conditioner'];

var el = cardElement.querySelectorAll('ul li.feature');
  
    for (var i = 0; i < el.length; i++) {
      el.classList.add(featuresArray);
    }

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

Mykhailo,

var el = cardElement.querySelectorAll('ul li.feature');
  
    for (var i = 0; i < el.length; i++) {
      el[i].classList.add(featuresArray[0]);
    }

[Mykhailo]

Владимир Проскурин, Огромное спасибо!
вместо нуля (featuresArray[0]) поставил [i] і теперь весь масив в li закидает.