fast interacting with large number of elements inside a container (DOM, javascript)

I will try to provide sources as requested.

First solution - best one
According to this site: JavaScript Grid with One Million Records
You can learn several important things:

  1. Large number of DOM nodes make rendering slow
  2. JavaScript arrays can handle large data sets
  3. Looping through large arrays is fast
  4. Sorting arrays by providing custom function to Array.sort() is fast
  5. eval() is slow, should not be used in large loops

So, I would recommend you to build an array to handle in a fast way your elements.

Second solution
Another solution taken from this site: Processing large amounts of data in JavaScript
would be to use a timeout (as strange as it sounds) to increase speed of handler.
The idea comes from Book: Secrets of the JavaScript Ninja


If you want only to show/hide, without change anything in the div's DOM and you know all the IDs, I think, that the best (fastest) way to archive this would be to prepare <style /> element and append it to DOM. Style el should contain all the ID's and proper display. Iterate through IDs and add it to CSS string, then create <style /> element and append string to it. This should work for you.


Build an id-to-element map / hash table beforehand:

var map = {};

for (var i = 0, l = ids.length; i < l; i++) {
    map[ids[i]] = document.getElementById(ids[i]);
}

where ids is a list of element IDs. (If you need to 5000 elements by their IDs, I assume you have a list or can generate one.)

Then when you remove the container element from the DOM, you can use the map to find elements by their IDs.