Не могу получить мои элементы из DOM, чтобы добавить их свойства CSS?

Question

Я работаю над шаблоном shopify, поэтому я пытаюсь отредактировать некоторый код и изменить некоторые свойства CSS с помощью JS.

Когда я проверяю свои элементы, я вижу, что:

Я разбит на четыре элемента: классы "spr-container", "spr-summary-caption", "spr-summary-actions", "spr-content", Поэтому я написал этот код:

<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>

И я получаю это на своей консоли:

Что означает, что яполучать пустые коллекции, но когда я щелкаю одну из них, длина коллекции становится равной 1, а когда я щелкаю элемент, показанный в инспекторе, он переводит меня в нужный элемент.

Это вызывает у меня проблемы, потому что когда япопробуйте получить мой элемент так:

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

Я получаю:

undefined

Есть ли что-нибудь, что может помочь мне решить эту проблему.

Любая помощь будетвысоко ценится.

Answer 1

Оберните это:

document.addEventListener("DOMContentLoaded", getData);

function getData() {
    let urlPr = window.location.href;
    if(urlPr.includes("products")) {
        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"));
    }
}