Как получить элемент из 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>