Javascript 如何从滑块'；多姆

我想为滑块的第一个和最后一个元素（5个活动元素）设置样式。我有代码，但问题是我无法获得这两个元素

我用的是这个（是的，我用的是光滑的滑块）

但我只得到HTMLCollection[]，当我使用

var first = slickActive[0];
var last = slickActive[slickActive.length - 1];
console.log(first, last);

我无法为滑块的第一个和最后一个活动元素设置未定义和无法设置样式

还有一些滑块的html代码

我想得到第一个和最后一个元素，并将它们设置为css样式，如背景和不透明度

.slick活动：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：#fff；
不透明度：0.2；
z指数：10；
}

如果你有更简单的方法来设置我想要的背景，你可以用它来代替我的方式。多谢各位

但我只收到HTMLCollection

有了这些代码和标记，你甚至不应该得到它们，你应该得到一个错误。您使用了

getElementById

，但是元素没有

id

，它有一个

类

通过
querySelector
，您可以使用类
滑块巡更获取第一个元素，然后通过
querySelectorAll
获取其中所有
活动的
元素：

const active = document.querySelector(".slider-tour").querySelectorAll(".slick-active");
const first = active[0];
const last = active[active.length - 1];

实例：


const-active=document.querySelector（“.slider-tour”）.querySelector-all（.slick-active”）；
const first=active[0]；
const last=active[active.length-1]；
first.style.color=“绿色”；
last.style.color=“蓝色”
注意，我在活动元素中添加了文本，因此您可以看到我通过JavaScript应用的颜色变化：
a0
a1
a2
a3
a4
“但我只得到HTMLCollection”使用这些代码和标记，您甚至不应该得到这些，您应该得到一个错误。您已经使用了
getElementById
，但是元素没有
id
，它有一个
类
。是的，它可以在代码段中工作。但是当我在我的项目中使用it代码时，我得到的只有NodeList[]，包括空长度，这怎么可能呢？这就是为什么我使用getElementById，开始时我得到了带有slider tour id的div，之后我得到了所有光滑的活动类元素，很抱歉，我显示了没有id的html代码。它看起来像@NickolasDzR-如果
节点列表
为空，这是因为在运行该代码时，滑块中没有任何
.slick活动的
元素。当我添加window.onload函数时，它工作了。Thanks@NickolasDzR-好交易！FWIW：使用
onload
几乎从来都不是一个好主意。只需将您的
脚本
放在文档正文的末尾，就在关闭
标记之前。这样，脚本运行时，上面的标记定义的所有元素都存在。（或者，在任何现代浏览器上，使用
defer
属性标记脚本，浏览器在完成对HTML的解析之前不会尝试运行脚本。）
const active = document.querySelector(".slider-tour").querySelectorAll(".slick-active");
const first = active[0];
const last = active[active.length - 1];