"Array.prototype.slice: 'this' is not a JavaScript object" error in IE8

Question

It is my understanding that IE8 has access to the Array.prototype.slice method. Yet when I try to call it to turn a NodeList into an array, it gives me the error Array.prototype.slice: 'this' is not a JavaScript object. You can check it out here, or look at my code here:

HTML

<div id="test">Test</div>

JavaScript

var divs = document.getElementsByTagName('div');
divs = Array.prototype.slice.call(divs);
console.log(divs);

What's going on here?

Jonajonah

Answer 1

Update: A NodeList can be treated as an array in some ways - you don't actually have to do anything special with it before you can loop over it, for example:

var aDivs = [];
for (var = i = 0; i < divs.length; i++) {
    aDivs.push(divs[i]);
}

This will create an array with all of the nodes that matched when you ran document.getElementsByTagName()

See this question for a full explanation of why slice works with a NodeList in some browsers but not others, but it boils down this this sentence from the specification:

Whether the slice function can be applied successfully to a host object is implementation-dependent.

Faircloth

That doesn't work because divs is not an instance of Array. It is an instance of NodeList. It returns the error Object doesn't support property or method 'slice' when trying to do it that way. Using .call() makes it so this refers to the correct object. – Jonajonah

You're absolutely right - apologies; I've updated my answer. I suspect the reason you're getting that error is simply that because NodeList isn't a regular Javascript object, slice can't work with it. – Faircloth

Answer 2

The error message is accurate - your nodelist is not a JavaScript object, it is a "Host Object", which you can't necessarily pass around like regular JavaScript objects. Run this code in IE8's JavaScript console:

document.querySelectorAll("div") instanceof Object

It returns false.

Coping

Answer 3

I assume that you want to keep the same content even if the NodeList set changes.

If it's that case, bad news : IE8 is broken. And it can't handle using slice on NodeList.

So you will need to use a fallback and make the "slice" yourself when slice fails (by using a try/catch).

Note that If you don't expect the DOM to change, and if an array-like object is enough, then you can just use the NodeList like any other array (except that it is not, and that perhaps it will be modified if the DOM changes).

[edit] Actually it's not a broken design, it's allowed by the standard (as stated by the link in Kelvin Mackay's comment)

Torino

For once, IE gets away with doing a half-baked job on a technicality lol – Faircloth