title: How can a read only property(element.classList) can be modified or assigned to some other value in javascript?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.addEventListener('keydown',function(e) {
      const key= document.querySelector(`div[data-key='${e.keyCode}']`);
      console.log(key.className);
      console.log(key.classList);
      key.classList=['ajay','dish'];
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-key="65" class="key ajay"&gt;
     &lt;kbd&gt;A&lt;/kbd&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><img src="https://i.stack.imgur.com/SGp4M.jpg" alt="enter image description here"></p>
  
  <p>Above is a screenshot of chrome devtools with values modified.</p>
  
  <p>I read on  <a href="https://developer.mozilla.org/en/docs/Web/API/Element/classList" rel="noreferrer">MDN</a> that <code>element.classList</code> is read only property but can be modified by <code>add()</code> etc.</p>
  
  <p>I assigned it to some other array and that is working too.</p>
  
  <p>In other cases, whenever I tried to modify/assign read only property, it always gave <code>typeError</code>.</p>