Getting class values from children of the parent element

Parts of the following code are from a quick form verification tutorial I found on YouTube. I'm trying to create an additional feature to generate a success message inside of the checkInputs() function if all the formControl class names = form-control success in the setSuccessFor(input) function. I created a variable allEl that converts the allElementsNode to an array, but I can't seem to iterate through that to pull the class names of the children. So [...allElementsNode][0] gives me access to the parent form element, so what I'm trying to do is iterate through all child divs in order to grab the class value to compare if it is equal to form-control success. If I try to iterate through allEl, I get undefined.

HTML

 <form class="form" id="form">
                <div class="form-control">
                    <label>Username</label>
                    <input type="text" placeholder="Angel" id="username">
                    <i class="fa fa-check-circle"></i>
                    <i class="fa fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>
                <div class="form-control">
                    <label>Email</label>
                    <input type="email" placeholder="angel@gmail.com" id="email">
                    <i class="fa fa-check-circle"></i>
                    <i class="fa fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>
                <div class="form-control">
                    <label>Password</label>
                    <input type="password" placeholder="password" id="password">
                    <i class="fa fa-check-circle"></i>
                    <i class="fa fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>
                <div class="form-control">
                    <label>Password check</label>
                    <input type="password" placeholder="Password two" id="password2">
                    <i class="fa fa-check-circle"></i>
                    <i class="fa fa-exclamation-circle"></i>
                    <small>Error message</small>
                </div>
                <button>Submit</button>
            </form>

JavaScript

const form = document.querySelector('#form');
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const password = document.querySelector('#password');
const password2 = document.querySelector('#password2');
let allElementsNode = document.querySelectorAll("#form");
const allElementsArray = Array.from(allElementsNode);
let formControl;

form.addEventListener('submit', (e) => {
    e.preventDefault();
    checkInputs();
});

function checkInputs() {
    // get values from the inputs
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if (usernameValue === '') {
        // show error
        setErrorFor(username, 'Username cannot be blank');
    } else {
        // show success
        setSuccessFor(username);
    }
    if (emailValue === '') {
        // show error
        setErrorFor(email, 'Email cannot be blank');
    } else if (!isEmail(emailValue)) {
        setErrorFor(email, 'Email is not valid')
    } else {
        // show success
        setSuccessFor(email);
    }
    if (passwordValue === '') {
        // show error
        setErrorFor(password, 'Passwords cannot be blank');
    } else {
        // show success
        setSuccessFor(password);
    }
    if (password2Value === '' || password2Value !== passwordValue) {
        // show error
        setErrorFor(password2, 'Passwords cannot be blank and must match!');
    } else {
        // show success
        setSuccessFor(password2);
    }
    // Set success message. All formControl should have the success class set
    // console.log(formControl.className)
    const allEl = [...allElementsNode][0];
    console.log(allEl);
    const allCtrlEl = Array.from(allEl).forEach(item => item);
    console.log(allCtrlEl);
}

function setErrorFor(input, message) {
    formControl = input.parentElement; // .form-control
    const small = formControl.querySelector('small');

    // add error message inside small
    small.innerText = message;
    // add error class
    formControl.className = 'form-control error';
}

function setSuccessFor(input) {
    formControl = input.parentElement; // .form-control
    formControl.className = 'form-control success';
}

function isEmail(email) {
    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    return emailPattern.test(email); 
}

Solution

It looks like your allElementsNode is the parent form so you need to get childrenElements like so

const allEl = [...allElementsNode.children];