classList vide retourne vrai

Question

Je me demande pourquoi les écrans d'alerte suivants tandis que le classList est une chaîne vide:

<p id="p">Hello, world!</p> 
<button id="b">Button</button> 
<script> 
    document.getElementById('b').onclick = function() { 
     if (document.getElementById('p').classList) { 
      alert('Full!'); 
     } 
    }; 
</script> 

DEMO

Answer 1

Parce que classList est un objet de type DOMTokenList avec des méthodes redéfinies comme toString() (c'est pourquoi alert(document.getElementById('p').classList) montre une chaîne vide), etc.

Ainsi, lorsque vous exécutez if (document.getElementById('p').classList) { vous avez réellement smth comme if (Object) { et dans ce cas passera. Pour assurer - voir typeof(document.getElementById('p').classList) - ce sera collection. Essayez également d'écrire dans la console document.getElementById('p').classList.__proto__ - vous verrez DOMTokenList objet qui a un Prototype de lien vers le DOMTokenList contructor (document.getElementById('p').classList.__proto__.constructor).

En savoir plus sur DOMTokenList - https://developer.mozilla.org/en/docs/Web/API/DOMTokenList

Answer 2

classList existe, mais n'a pas de longueur. Essayez plutôt avec document.getElementById('p').classList.length.