Javascript DOM capturing after using javascript to insert dom

I have a question regarding DOM manipulation, say I insert a grid using this function:

const grid__container = document.querySelector('.grid__container');

function createVertexes() {
    for (let i = 0; i < 9; i++) {
        const grid = document.createElement("div");
        grid.setAttribute('class', "vertex");
        grid.setAttribute('id', i+1);
        grid__container.appendChild(grid);

    }
}

afterwards, I try to grab all the vertexes with the class “vertex” using document.querySelectorAll(“vertex”) it doesnt work:

const vertexes = document.qeurySelectorAll('vertex');

but this works:

const vertexes = grid__container.childNodes;

I see that the difference is that grid__container is pre-defined in my HTML file, but I wrote the querySelectorALL method in a top down approach, so I dont understand why query selector doesnt work, because I created the elements then tried to grab it, anyone knows why?

I only know this is called DOM-manipulation and not know the exact name of this error and am quite new to javascript, please help.