无法从DOM中获取元素来添加CSS属性？

Question

我正在研究shopify模板，因此我尝试用tryig编辑一些代码，并使用JS更改一些CSS属性。

检查元素时，我看到了：

我对四个元素感兴趣，分别是“ spr-容器”，“ spr-摘要-标题”，“ spr-摘要-动作”，“ spr-内容”类，所以我写了这段代码：

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

然后我在控制台上得到它：

这意味着我得到了emty集合，但是当我单击其中一个集合时，集合长度变为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"));
    }
}