Can't get my elements from DOM to add them CSS properties?

I am working on a shopify template, so I a tryig to edit some code, and change some CSS properties using JS.

When I inspect my elements, I see that :

I am intersted in four elements, with classes "spr-container", "spr-summary-caption", "spr-summary-actions", "spr-content", So i wrote this code :

<script>
    let urlPr = window.location.href;
    if(urlPr.includes("products")){
      setTimeout(function(){
        console.log(document.getElementsByClassName("spr-container"));
        console.log(document.getElementsByClassName("spr-summary-caption"));
        console.log(document.getElementsByClassName("spr-summary-actions"));
        console.log(document.getElementsByClassName("spr-content"));
      },1000);
    }
</script>

And I get this on my console :

Which means I am getting emty collections, but when I click one of them, the collection length becomes 1 and when I click the element shown in the inspector it takes me to my wanted element.

This is causing me problem, because when I try to get my element like that :

console.log(document.getElementsByClassName("spr-container")[0]);

I get :

undefined

Is there anyway that can help me solve this problem.

Any help would be much appreciated.