DOM 엘리먼트에 Array Prototype 내장 함수 이용하는 방법

DOM 엘리먼트에 Array 내장 함수를 이용하는 방법

<div>a</div>
<div>b</div>
<div>c</div>

위와 같이 HTML 에 3 개의 div 가 있을 때, 모든 div 를 잡아서 내용이 b 인것만 남기고 싶다고 해보자.

const divs = document.querySelectorAll("div");
divs.filter((e) => e.textContent === "b");

// Uncaught TypeError: divs.filter is not a function"

위와 같이 filter 메서드를 사용하면 편할 것 같은데, 바로 사용이 되지는 않는다.

const divs = document.querySelectorAll("div");
const filtered = Array.prototype.filter.call(
  divs,
  (e) => e.textContent === "b"
);

console.log(filtered); // [[object HTMLDivElement]]

Function.prototype.call, Function.prototype.apply, Function.prototype.bind 와 같이 this 를 바인딩하는 메서드를 이용하면 된다.