document.getElementById in loop
<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>
