Splice is not a function error

Question

I am getting the error tweetParentsArray.splice is not a function at injectFactCheck

function injectFactCheck(){
    var index = 5;
    var tweetParentsArray = document.getElementsByClassName("js-stream-tweet");
    if(tweetParentsArray.length == 0){return;}
    tweetParentsArray.splice(0, index);

When I console.log the tweetParentsArray it appears to be a normal array to me so I am not sure as to why this function would not exist on this object.

You are actually getting an Object from getElementsByClassName. Array and Object are two different types. — Paul Jerome Bordallo, Apr 30 '17 at 05:43
http://stackoverflow.com/questions/11064562/why-does-javascripts-getelementsbyclassname-provide-an-object-that-is-not-an-ar check this stackoverflow question & answer — Keshan Nageswaran, Apr 30 '17 at 05:48

score 2 · Accepted Answer · edited May 23 '17 at 11:54

2

document.getElementsByClassName returns HTMLCollection which is not an array. You can use Array.prototype.slice.call(htmlCollection) to convert it to array and then perform further calculation with array.

function injectFactCheck(){
  var index = 5;
  var htmlCollection = document.getElementsByClassName("js-stream-tweet");
  var tweetParentsArray = Array.prototype.slice.call(htmlCollection);
  if (tweetParentsArray.length == 0){return;}
  tweetParentsArray.splice(0, index);
}

See more in this question: Most efficient way to convert an HTMLCollection to an Array

edited May 23 '17 at 11:54

Community

1
1

answered Apr 30 '17 at 05:41

Andrius

947
15
22

2

If you can use ES2015/ES6 then `Array.from` is your friend – mfeineis Apr 30 '17 at 06:15
1

@mfeineis or spread operator https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator – Andrius Apr 30 '17 at 06:18
true :-), although it is hard to google for `...` when you see it in code and don't have a clue what it's for *g* – mfeineis Apr 30 '17 at 06:40

brk · Answer 2 · 2017-04-30T05:44:10.640

0

getElementsByClassName return a HTMLCollection. It does not have splice method. You can convert the HTMLCollection to array to use the splice method.

var tweetParentsArray = Array.prototype.slice.call(document.getElementsByClassName("js-stream-tweet"))
    if (tweetParentsArray.length == 0) {
      return;
    }
    tweetParentsArray.splice(0, index)

edited Apr 30 '17 at 05:44

answered Apr 30 '17 at 05:37

brk

48,835
10
56
78

score 0 · Answer 3 · answered Apr 30 '17 at 05:41

0

This in fact is an HTMLCollection, which is "array-like". See https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection for more details.

answered Apr 30 '17 at 05:41

Omri Sivan

339
3
8

Splice is not a function error

3 Answers3