I want to reorder a NodeList elements, eg, move node1 after node2. Codes are as follow:

var cols = document.querySelectorAll("ul>li");
var target = cols[0];
[].splice.call(cols,[0, 1]);
[].splice.call(cols,[3, 0, target]);

But it throws exception:

Uncaught TypeError: Cannot set property length of # which has only a getter

Does it mean cannot apply splice function to NodeList array?

I want to reorder a NodeList elements, eg, move node1 after node2. Codes are as follow:

var cols = document.querySelectorAll("ul>li");
var target = cols[0];
[].splice.call(cols,[0, 1]);
[].splice.call(cols,[3, 0, target]);

But it throws exception:

Uncaught TypeError: Cannot set property length of # which has only a getter

Does it mean cannot apply splice function to NodeList array?

• javascript

• related, if not duplicate: Use Array Prototype Functions with non-arrays – Bergi Commented Apr 1, 2016 at 3:08

4 Answers 4

Try reading the NodeList into an array:

var cols_array = [].slice.call(cols);
cols_array.splice(0, 1);

You can't actually modify the NodeList, it just represents a list of nodes that querySelectorAll found.

Does it mean cannot apply splice function to NodeList array?

Yes, it does, because a NodeList isn't an array, but an array-like object. Array.prototype.function.apply(someNodeList) works in cases that don't mutate the NodeList.

If your goal is to re-order the elements, you will have to account for that you'll have to manipulate the DOM some other way - not through that NodeList.

// Clearly Unikong is superior so we have to fix that it is not at the top. 

var list = Array.prototype.slice.call(document.querySelectorAll('ul>li')).reduce(function(init, el) {
  if (el.innerText === 'Unikong') { 
    init.splice(0, 0, el); 
  } else 
    init.push(el);
  return init;
}, []).reduce(function(init, el) {
  init.appendChild(el);
  return init;
}, document.createElement('ul')), 
    oldList = document.querySelector('ul');

document.querySelector('ul').parentNode.replaceChild(list, oldList);

<ul>
  <li>One Bunny</li>
  <li>Two Bunny</li>
  <li>Three Bunny</li>
  <li>Unikong</li>
</ul>

You can convert a NodeList into an Array, and then you are able to access the Array's method.

Try something like this, with ES6 spread syntax this bees short and sweet:

const nodelist = [...document.querySelectorAll('div')];

// after convert to array, you're now able to access the Array's method like below...

nodelist.forEach(...);

nodelist.map(...);

nodelist.splice(...);

Try this:

const cols = Array.from(document.querySelectorAll("ul>li"))

It converts your nodeList to an Array.