필터가 함수가 아닙니다.

Question

"Flexbox"라는 텍스트가 포함되어 있으면 목록 항목의 배열을 반환하려합니다.

임이 오류가 : 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이 NodeList 아닌 Array 반환합니다. 배열 메서드를 사용하려면 배열로 변환 할 수 있습니다.

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

Answer 2

이유는 querySelectorAll이 배열을 반환하지 않기 때문입니다.

당신은을 통해 배열로 노드 목록을 변환 할 수있는 (https://davidwalsh.name/nodelist-array

Answer 3

querySelectorAll는 array을 반환하지 않는, 즉 filter가 정의되어 있지 않은 이유입니다 :

이

var itemsArray = Array.prototype.slice.call(document.querySelectorAll("li"));

소스가 array의 기능). 이 경우 filter 함수를 Array.prototype에서 호출하고 textContent.indexOf(string)을 사용하여 요소에 원하는 텍스트 콘텐츠 (Flexbox)가 있는지 확인해야합니다. 샘플의 경우 :

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); 

여기에 샘플을 참조하십시오 : https://jsbin.com/hibixipoyo/edit?html,js,output

Answer 4

document.querySelectorAll()가 NodeList 반환합니다. NodeLists 배열과 같은 그러나 당신, 당신은 배열에 노드 목록을 변환해야이 기능을 사용할 경우 등 대해 forEach,지도, 필터, 처럼 Array에서 제공하는 방법의 많은 기능하지 않습니다

var nodesArray = [].slice.call(document.querySelectorAll('li'));