title: document.getElementById in loop
body: <p>Let's say I want to change class for all div's that have class "the_class" in the example below. Would it be a good approach to add numbered id's when looping through a long list (300 li's and many nested div tags). Or will document.getElementById be slow in this case?</p>
  
  <p>Since I control the HTML/PHP adding ID's is not a problem for me. But I figure that "document.getElementById" will loop through the whole document each time. Maybe some other method woudl not loop through the whole each time and therefore be faster?</p>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>var data_length = document.getElementById('the_ul').getAttribute('data-length'),
      i = 0;
  while(i++ &lt; data_length) {
      document.getElementById('id_name' + i).className = 'a_new_class';
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id=the_ul data-length="2"&gt;
      &lt;li&gt;
          &lt;div&gt;
              &lt;div&gt;
                  &lt;div&gt;content1&lt;/div&gt;
                  &lt;div id=id_name1 class=the_class&gt;content2&lt;/div&gt;
                  &lt;div&gt;content3&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div&gt;
              &lt;div&gt;
                  &lt;div&gt;content1&lt;/div&gt;
                  &lt;div id=id_name2 class=the_class&gt;content2&lt;/div&gt;
                  &lt;div&gt;content3&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>