Ошибка с appendChild

Есть код :

var apple = "../../img/lessons/lesson_1/lesson_1.2/apple.jpg";

  function closeLightbox() {
    blackpanel.innerHTML = "";
    blackpanel.style.display = "none";
    blackpanel.removeEventListener("click",  closeLightbox);
}
 
 function showPicture(path) {
    blackpanel = document.getElementsByClassName("blackpanel");
    
    image = document.createElement('img');
    image.src = path;
    image.style.width = "50vw";
    image.style.margin = "auto";
    image.style.borderRadius = "5px";
    blackpanel.appendChild(image);
    blackpanel.style.display = "flex";
    blackpanel.addEventListener("click", closeLightbox);
 }

в файле страницы в body прописано: <div class="blackpanel"></div>

а также сама кнопка, на нажатию по которой должен срабатывать лайтбокс: <span class="fa fa-image" style="cursor:pointer" onclick="showPicture(apple)"></span>

в файле стилей:

.blackpanel {
             position:absolute;
             left:0;
             top:0;
             bottom:0;
             right:0;
             background:rgba(0,0,0,0.8);
             display:none;
             z-index:5;
            }

При данном коде выдает ошибку:

Uncaught TypeError: blackpanel.appendChild is not a function
    at showPicture (imglesson_1.2.js:17:13)
    at HTMLSpanElement.onclick (lesson_1.2.php:109:136)

что не функция, я так понимаю.

Если поменять blackpanel = document.getElementsByClassName("blackpanel"); на blackpanel = document.getElementById("blackpanel"); и соответственно в файлах class на Id

То все работает, изображения отображаются. Что нужно поменять подскажите пожалуйста? Просто не хотелось бы в каждой странице (а их у меня около сотни на сайте) делать для blackpanel свой id