테스트 및 내 오브젝트과 같이이 자바 스크립트

Question

동적으로 번호가 클래스 이름을 계산하는 방법 : 그냥 사용합니다

<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> 

:

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

이 같이 HTML 요소의 목록입니다 indexof하지만 왜 .contains이 false를 반환하는지 이해하고 싶습니까?

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

또한

이 노드 목록에 'cycle-*' 클래스 이름의 수를 점점에 대한 권장 사항

?

Answer 1

CSS 속성 선택자를 사용하여이를 수행 할 수 있습니다.

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

Answer 2

classList 현재 DOM 요소에 할당 된 클래스 목록이며, 그 아이의 클래스를 포함하지 않는 다음 ^ 수단 "로 시작".

목록의 유일한 항목은 decode-text입니다.