Синтаксис Javascript не работает в JQuery

Я пробовал изменить стиль с помощью JS.

Первый метод - JQuery, он сработал. N.B. У меня несколько дивов .slider__content.

$(window).scroll(function() {
    var wScroll = $(this).scrollTop();

    $('.slider__content').css({
      'transform' : 'translate(0px, -'+ wScroll /2 +'%)'
    });
});

Но этот второй синтаксис возвращает в консоли браузера «slideBG.style is undefined».

$(document).ready(function() {
    .
    .
    .
    window.addEventListener('scroll', function() {
        var wScroll = this.pageYOffset;
        var slideBG = document.querySelectorAll('.slider__content');
        slideBG.style["transform"] = 'translateY(' + window.pageXOffset /2 + "%)";
    });
});

Почему это происходит?