How to make HTMLCollection not live?

Question

var cells = someTable.getElementsByTagName('td');

Is live collection, meaning that when I add new td to table, cells length will increase by 1. How can I make it not live?

@CBroe: One doesn't *have* to convert to array after the fact; one can use `querySelectorAll` instead to get a snapshot `NodeList`. — T.J. Crowder, Jan 18 '18 at 10:36

score 1 · Answer 1 · answered Jan 18 '18 at 10:35

You have a couple of options.

One is to use querySelectorAll instead; it returns a "snapshot" NodeList:

var cells = someTable.querySelectorAll("td");

Another option is to convert it into an array:

var cells = Array.from(someTable.getElementsByTagName("td"));

Array.from is relatively new, but can be polyfilled for older browsers. Or if you want to support old browsers without polyfilling, use slice:

var cells = Array.prototype.slice.call(someTable.getElementsByTagName("td"));

1 Answers1