如何从滑块的DOM获取元素

Question

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

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

var sliderTour = document.getElementById("slider-tour");
var slickActive = sliderTour.getElementsByClassName("slick-active");

但是我只获得HTMLCollection []，并且当我使用时

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

我为滑块的活动元素的第一项和最后一项获得了未定义的样式，无法设置样式

并且有一些滑块的html代码

<section class="slider-tour" id="slider-tour">
 <div class="slicker-booking slick-initialized slick-slider">
  <div class="slick-list draggable">
   <div class="slick-track">
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-active"></div>
     <div class="slider-item slick-slide slick-active"></div>
     <div class="slider-item slick-slide slick-active"></div>
     <div class="slider-item slick-slide slick-active"></div>
     <div class="slider-item slick-slide slick-active"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
   </div>
  </div>
 </div>
</section>

我想获得第一个和最后一个元素，并将它们设置为css样式，例如具有不透明性的背景

.slick-active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0.2;
    z-index: 10;
}

如果您有更简单的方法来设置所需的背景，则可以说出来，而不用我的方式。谢谢

Answer 1

但是我只得到HTMLCollection

使用该代码和标记，您什至不应该得到它，应该得到一个错误。您已使用getElementById，但元素没有id，但有class。

您可以通过slider-tour获得具有类querySelector的第一个元素，然后通过slick-active获得其中的所有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").querySelectorAll(".slick-active");
const first = active[0];
const last = active[active.length - 1];
first.style.color = "green";
last.style.color = "blue";

Note I've put text in the active elements so you can see the color change I'm applying via JavaScript:

<section class="slider-tour">
 <div class="slicker-booking slick-initialized slick-slider">
  <div class="slick-list draggable">
   <div class="slick-track">
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-active">a0</div>
     <div class="slider-item slick-slide slick-active">a1</div>
     <div class="slider-item slick-slide slick-active">a2</div>
     <div class="slider-item slick-slide slick-active">a3</div>
     <div class="slider-item slick-slide slick-active">a4</div>
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
   </div>
  </div>
 </div>
</section>