title: How to select the textContent of copy event and how to use it before doing copy event?
body: <p>How can I select textcontent before it is copied to the clipboard? Here is an idea of selecting with one click: <a href="https://stackoverflow.com/a/1173319">https://stackoverflow.com/a/1173319</a>. But this is an other code with id selector. I only want to select textcontent with a class before copy it. Below is the code that is used to make a copy (onclick element with class as classname):</p>
  
  <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>spans = document.querySelectorAll(".class");
  for (const span of spans) {
    span.onclick = function() {
      document.execCommand("copy");
    }
  
    span.addEventListener("copy", function(event) {
      event.preventDefault();
      if (event.clipboardData) {
        event.clipboardData.setData("text/plain", span.textContent);
      }
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="class"&gt;
    p
  &lt;/p&gt;
  &lt;span class="class"&gt;
  span
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>