Как проверить и подсчитать динамически пронумерованные имена классов с JavaScript

Question

У меня есть объект, как так:

var text = document.getElementsByClassName('decode-text')[0]; 

Это список HTML элементов, которые выглядят как:

<div class="decode-text"> 
    <div class="cycleText"> 
     <div class="cycle-0"> 
      <div class="text-animation">hey</div> 
     </div> 
     <div class="cycle-1"> 
      <div class="text-animation">you</div> 
     </div>  
     <div class="cycle-2"> 
      <div class="text-animation">guys</div> 
     </div> 
    </div> 
</div> 

Я просто использовать indexof но хотите понять, почему .contains возвращает false?

text.classList.contains('cycleText'); = false // why 

также любые рекомендации по получению числа 'cycle-*' имен классов в этом списке узлов?

Answer 1

Вы можете добиться этого с помощью селекторов атрибутов css. В ^ означает «начинается с»:

document.querySelectorAll('[class^="cycle-"]'); 

Answer 2

classList список классов, отнесенных к текущему элементу DOM, и не включает в себя классы своих детей.

Единственная запись в списке - decode-text.