so I have this function that fetch json data from internal storage and it populate select input with options from the json file.

function getData(){
fetch("../Assets/js/ville.json")
.then(response => response.json())
.then(data => 
    data.forEach(element => {
        let opt  = document.createElement("option");
        opt.value = element.name;
        opt.innerHTML = element.name;
        opt.setAttribute('class','options');
        opt.setAttribute('data-lat',element.latitude);
        opt.setAttribute('data-lng',element.longitude);
        select.appendChild(opt);
    })
    );
}

Within this function I create an attribute called data-lat and data-lng wich is populated from the json file also, and I gave it a classname called options my question is why when i run this function below :

window.onload = function pupulateSelect() {
        getData();
        let options = document.querySelectorAll('.options');
        console.log(options);
}

it doesn't log the option nodes in the console ?