применить отображение нет к классу, где другой класс доступен в том же DOM в JS

Question

У меня есть HTML-коды (присутствующие в том же DOM), в которых я хочу применить логику, согласно которой, если определенный класс доступен в DOM, стиль не отображается должен применяться к другому классу, который присутствует в том же DOM.

HTML Code # 1

<div class="cpac-video__inner">
   <div class="vjs-playing vjs-has-started" >   // If vjs-playing vjs-has-started classes are present in a DOM 

   </div>  
</div>

HTML Code # 2

<span class="video-hl video-cat HW">   // then style display none should be applied to HW class
    <span class="cpac-icon cpac-icon-hl-link-flip tv-logo"></span>ABC  
</span>

Это то, что я пробовал, но это не работает.

var elementExists = document.getElementsByClassName("vjs-playing vjs-has-started");

if(elementExists)
{
document.getElementsByClassName("HW").style.display = "none";
}

Постановка задачи:

Мне интересно, какие изменения мне нужно сделать в приведенном выше сценарии, чтобы когда конкретный класс был доступен в DOM, стиль отображения ни один не должен применяться к другому классу в том же DOM.

Answer 1

Посмотрите, что у вас есть раньше:

var elementExists = document.getElementsByClassName("vjs-playing vjs-has-started");

if(elementExists)
{
document.getElementsByClassName("HW").style.display = "none";
}

<div class="cpac-video__inner">
   <div class="vjs-playing vjs-has-started" >   // If vjs-playing vjs-has-started classes are present in a DOM 

   </div>  
</div>


<span class="video-hl video-cat HW">   // then style display none should be applied to HW class
    <span class="cpac-icon cpac-icon-hl-link-flip tv-logo"></span>ABC  

возвращает Uncaught TypeError: Cannot set property 'display' of undefined, в результате чего getElementsByClassName возвращает не прямое значение, а массив всех классов, содержащих это имя.

См. Следующее:

var elementExists = document.getElementsByClassName("vjs-playing vjs-has-started")[0];
console.log(document.getElementsByClassName("vjs-playing vjs-has-started"));

if(elementExists)
{
console.log(document.getElementsByClassName("HW"));
document.getElementsByClassName("HW")[0].style.display = "none";
}

<div class="cpac-video__inner">
   <div class="vjs-playing vjs-has-started" >   // If vjs-playing vjs-has-started classes are present in a DOM 

   </div>  
</div>


<span class="video-hl video-cat HW">   // then style display none should be applied to HW class
    <span class="cpac-icon cpac-icon-hl-link-flip tv-logo"></span>ABC

Обратите внимание на разницу между добавлением [0], которое указывает на первый индекс, и без него. Это потому, что getElementByClassName возвращает массивоподобный объект всех дочерних элементов, которые имеют все заданные имена классов.