title: Iterating through list items to set decoration values
body: <p>I want to use a for-loop to iterate to each list-item in the HTML code to set their decorations...</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>const items = document.querySelectorAll('#players li');
  items.forEach((item, index) =&gt; {
    if (index === 2) {
      document.getElementById("players").style.textDecoration = "underline";
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;section id="players"&gt;
        &lt;h1&gt;Players&lt;/h1&gt;
        &lt;ol&gt;
          &lt;li&gt;Alice&lt;/li&gt;
          &lt;li&gt;Bob&lt;/li&gt;
          &lt;li&gt;Cesar&lt;/li&gt;
        &lt;/ol&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I make each item be underlined, but not the <code>&lt;h1&gt;Players&lt;/h1&gt;</code> using my javascript code?</p>