как выбрать все элементы в выбранных элементах DOM

Question

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

const forms = document.querySelectorAll('.popup__form');
const inputs = forms.forEach((el) => {
    el.querySelectorAll('.popup__input')
})

по запросу

console.log(forms)

он выдает правильный результат со всеми DOM элементами, содержащий данный класс, а при

console.log(inputs)

выдает undefined. пробовал вообще даже

const inputs = forms.querySelectorAll('.popup__input')

но так он пытается ее прочесть как функцию почему-то и выдает, соответственно, ошибку.

Answer 1

как выбрать все элементы в выбранных элементах DOM

В вашем случае, вот так:

const inputs = document.querySelectorAll('.popup__form .popup__input');

Answer 2

Во-первых у вас ошибка в том, что querySelectorAll возвращает NodeList, а не массив. У них методы отличаются. Можете посмотреть, как преобразовать его в массив, способов много.

Во-вторых, вы используете forEach для наполнения переменной inputs при инициализации, но в самом теле forEach ничего не сохраняете. Возможно, вы хотели использовать map или reduce у массива.

Конечно проще сделать селектор, выбирающий элементы с классом popup__input из элементов с классом popup__form

Вот так

const inputs = document.querySelectorAll('.popup__form .popup__input');

Но для интереса и изучения языка, ваш код будет работать, если сделать вот так (но лучше так не делать, другое дело если у вас не коллекция HTML элементов)

const inputs = [...forms].reduce((items, el) => [
    ...items,
    ...el.querySelectorAll('.popup__input')
], []);

БЛОГ НА HUSL

как выбрать все элементы в выбранных элементах DOM

Ответы (2 шт):