[javascript] document.querySelectorAll이 실제 배열이 아닌 StaticNodeList를 반환하는 이유는 무엇입니까?

Crescent가 말한 것에 추가하기 위해,

원하는 함수 하나만 있으면 NodeList.prototype.map = Array.prototype.map과 같은 작업을 수행 할 수 있습니다.

이러지마! 작동이 보장되지는 않습니다.

JavaScript 또는 DOM / BOM 표준은 NodeList생성자 함수가 global / window속성 으로 존재 하거나에서 NodeList반환 된 속성 querySelectorAll이 상속되거나 프로토 타입이 쓰기 가능하거나 함수 Array.prototype.map가 실제로 NodeList에서 작동하도록 지정하지 않습니다.

NodeList는 ‘호스트 객체’가 될 수 있습니다 (IE 및 일부 이전 브라우저에서는 하나임). Array방법은 숫자 및 노출 자바 스크립트 ‘네이티브 객체에서 작동 할 수있는 것으로 정의 length특성을하지만,이 호스트 오브젝트에 대한 작업에 필요하지 않은 것 (그리고 IE에서, 그들은하지 않습니다).

DOM 목록에있는 모든 배열 메서드 (StaticNodeList뿐만 아니라 모두)를 얻지 못하는 것은 성가신 일이지만 신뢰할 수있는 방법은 없습니다. 모든 DOM 목록을 배열로 수동으로 변환해야합니다.

Array.fromList= function(list) {
    var array= new Array(list.length);
    for (var i= 0, n= list.length; i<n; i++)
        array[i]= list[i];
    return array;
};

Array.fromList(element.childNodes).forEach(function() {
    ...
});

답변

Array.prototype.map.call(document.querySelectorAll(...), function(...){...});

Element.prototype.querySelectorAll = (function(QSA){
    return function(){
        return [...QSA.call(this, arguments[0])]
    }
})(Element.prototype.querySelectorAll);