Which way is better? Storing the DOM objects in Array of objects or Direct dom manipulation?

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?".

I have a list of DOM objects for explanation:

<ul>
  <li></li>
  ...开发者_C百科
</ul>

The lis are dynamic and they are updated based on certain operations.

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).

Now, me and one of my colleague is having a discussion and the discussion is as follows,

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.

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.

So please help me understand which method/idea do you think is efficient and why?

Even if you maintain an array of DOM elements, Javascript is still going to have to search the DOM for the elements when you update them. I think the level of complexity you are adding by creating is completely unnecessary. Assuming the custom array method would be more efficient also pretty much assumes that you are going to be able to make this code more efficient than the browsers developers were able to make the Javascript engine in their respective browsers. Probably not a safe bet.

no point of storing data in an array. just use powerful DOM handling framework like jQuery and just work on directly with the DOM.

On rename operation- Loop through the file list for duplicates...if any duplicate is found-prompt the user to choose a different name else go ahead and rename it. Why would you go for one more array of objects just to loop through when you have the original list unless you want to maintain the original file list array for some other use?

There is no need to maintain an extra array. Most DOM retrieval methods return a NodeList ^[MDN], which is a live collection of DOM elements, i.e. the collection is always updated when some modification happend.

Thus you can do:

var list_elements = yourlist.getElementsByTagName('li');

and list_elements will always refer to all li descendents of your list.

Update: Of course you can also just keep a reference to yourlist and access the li elements with yourlist.children ^[MDN].

You can save yourself the extra step and retrieving the elements every time you want to make a modification by keeping a reference to that collection around.

It won't use more memory either (I think) because you just keep a reference to DOM elements (which already exist). When you delete a node, it is removed from the collection automatically, so you don't have to worry about keeping references to "dead" DOM nodes.