title: fast interacting with large number of elements inside a container (DOM, javascript)
body: <p>So I have a large number of divs (4000-5000) [each contains spans, anchors, images etc.] inside a container div and basically I am setting their display to none or block based on a condition. This does take some time.</p>
  
  <p>In my search for something faster I came across this page <a href="https://developers.google.com/speed/articles/javascript-dom">https://developers.google.com/speed/articles/javascript-dom</a> and the solution there is to remove the container div from the DOM and iterate the contained elements by getElementsByTagName.</p>
  
  <pre><code>/**
   * Remove an element and provide a function that inserts it into its original position
   * @param element {Element} The element to be temporarily removed
   * @return {Function} A function that inserts the element into its original position
   **/
  function removeToInsertLater(element) {
    var parentNode = element.parentNode;
    var nextSibling = element.nextSibling;
    parentNode.removeChild(element);
    return function() {
      if (nextSibling) {
        parentNode.insertBefore(element, nextSibling);
      } else {
        parentNode.appendChild(element);
      }
    };
  }
  
  
  function updateAllAnchors(element, anchorClass) {
    var insertFunction = removeToInsertLater(element);
    var anchors = element.getElementsByTagName('a');
    for (var i = 0, length = anchors.length; i &lt; length; i ++) {
      anchors[i].className = anchorClass;
    }
    insertFunction();
  }
  </code></pre>
  
  <p>The problem is I cannot use the solution provided because I need to access the children elements by their IDs and I can't do that, since the elements are removed from the DOM. Is there any way to achieve this?</p>
  
  <p>I also tried to remove the container div and append it to a documentfragment, but still I can't access the 5000 elements by their ID when they are in the documentfragment</p>
  
  <p>Finally, I also tried this:</p>
  
  <pre><code>document.getElementById("CONTAINERDIV").style.display = "none";
  
  //iterate through the 5000 children divs and change their classname
  
  document.getElementById("CONTAINERDIV").style.display = "block";
  </code></pre>
  
  <p>because I was hoping that it would not trigger a reflow for each iteration, but this didn't seem to provide an improvement in the time required.</p>
  
  <p>Does anyone have any thoughts on this?</p>