StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhich way is better? Storing the DOM objects in Array of objects or Direct dom manipulation?
text
Body
copied!<p>The title may not be too clear but let me explain what I mean by "Which way is better? Storing the DOM objects in Array of objects or Direct dom manipulation?".</p> <p>I have a list of DOM objects for explanation:</p> <pre><code><ul> <li></li> ... </ul> </code></pre> <p>The <code>li</code>s are dynamic and they are updated based on certain operations.</p> <p>Our requirement is, to check if the list already contains an element with the same text as the new one so for example consider a file listing and you rename a node and if the name already exists, remove all the DOM object which contain the same text and generate the latest one (hope that's pretty much clear).</p> <p>Now, me and one of my colleague is having a discussion and the discussion is as follows,</p> <p>My colleague says, store the DOM objects in an array of object and then append them to the list and when the supposedly rename operations is performed, loop through that array of object which stores the reference to the DOM element and do the removing and then generating the new node operation because he believes fetching the element from DOM is gonna be more inefficient.</p> <p>My idea is, do not store the list and consume the memory as the DOM may get updated at any given point of time so each time you wanna remove and add a node fetch the list do the looping and perform the operations because I believe if you store the list you are consuming the memory and once you update the DOM you'll again have to update the array or else it will store the reference to the old DOM object and that's gonna make it more inefficient.</p> <p>So please help me understand which method/idea do you think is efficient and why?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload