Filter is not a function? [duplicate]

Question

Im attempting to return an array of my list items if they contain the text "Flexbox" in them.

Im getting this error: Uncaught TypeError: items.filter is not a function

    <ul>
        <li data-time="5:10">Flexbox 1</li>
        <li data-time="5:10">Something else</li>
        <li data-time="5:40">Flexbox 2</li>
        <li data-time="5:10">Something also else</li>
        <li data-time="5:40">More Flexbox for you</li>
    </ul>


'use strict';

var items = document.querySelectorAll('li');

var itemsFlex = items.filter(function(item) {
    return item.includes('Flexbox')
});

console.log(itemsFlex);

Answer 1

querySelectorAll returns a NodeList not an Array. You can convert it to an Array if you'd like to use Array methods.

var items = document.querySelectorAll('li');
var itemsArray = Array.from(items);

Answer 2

The querySelectorAll does not return an array, that is the reason why filter is not defined (which is a function of array). In this case, you should call filter function from Array.prototype and use textContent.indexOf(string) to check if the element has the text content you want (Flexbox). For sample:

var items = document.querySelectorAll('li');
var filter   = Array.prototype.filter;

var itemsFlex = filter.call(items, function(item) {
    return item.textContent.indexOf('Flexbox') >= 0;
});

console.log(itemsFlex);

See the sample here: https://jsbin.com/hibixipoyo/edit?html,js,output