Чому document.querySelectorAll повертає StaticNodeList, а не реальний масив?

Мене клопотають, що я не можу просто зробити document.querySelectorAll(...).map(...)навіть у Firefox 3.6, і я все ще не можу знайти відповідь, тому я подумав, що перехресне повідомлення на ТАК на це запитання з цього блогу:

http://blowery.org/2008/08/29/yay-for-queryselectorall-boo-for-staticnodelist/

Хтось знає технічну причину, чому ви не отримуєте масив? Або чому StaticNodeList не буде наслідувати від масиву таким чином , що ви могли б використовувати map, concatі т.д.?

(До речі, якщо це лише одна функція, яку ви хочете, ви можете виконати щось на зразок NodeList.prototype.map = Array.prototype.map;... але знову ж таки, чому ця функціональність (навмисно?) Заблокована в першу чергу?)

Я вважаю, що це філософське рішення W3C. Конструкція W3C DOM [специфікація] цілком ортогональні до конструкції JavaScript, як РОМ означає бути платформи і мови нейтральна.

Такі рішення, як " getElementsByFoo()повертає впорядкований NodeList" або " querySelectorAll()повертає StaticNodeList", є дуже навмисними, так що реалізаціям не потрібно турбуватися про вирівнювання повернутої структури даних на основі залежних від мови реалізацій (наприклад, .mapвони доступні для масивів у JavaScript та Ruby, але не в Списках на C #).

W3C мета низький: вони говорять, що NodeListповинно містити тільки для читання .lengthвластивості типу непідписаного довгої , тому що вони вважають , що кожна реалізація може принаймні підтримка , що , але вони не будуть говорити явно , що []оператор індексу повинен бути перевантажені для підтримки отримання позиційних елементів, тому що вони не хочуть стиміювати якийсь поганий маленький мову, який йде разом із цим, який хоче реалізувати, getElementsByFoo()але не може підтримувати перевантаження оператора. Це поширена філософія, яка присутня на більшій частині специфікації.

Джон Резіг озвучив подібний варіант, як ваш, до якого додає :

Мій аргумент не так вже й багато, що NodeIteratorне дуже DOM - це те, що він не дуже JavaScript. Він не користується функціями, наявними в мові JavaScript, і використовує їх якомога краще ...

Я дещо співпереживаю. Якби DOM був написаний спеціально з функціями JavaScript на увазі, це було б набагато менш незручно і більш інтуїтивно. У той же час я розумію дизайнерські рішення W3C.

Ви можете використовувати оператор розкидання ES2015 (ES6) :

[...document.querySelectorAll('div')]

перетворить StaticNodeList в масив елементів.

Ось приклад того, як ним користуватися.

[...document.querySelectorAll('div')].map(x => console.log(x.innerHTML))

<div>Text 1</div>
<div>Text 2</div>

Я не знаю, чому він повертає список вузлів замість масиву, можливо, тому що, як getElementsByTagName, він оновить результат при оновленні DOM. У будь-якому випадку дуже простим методом перетворення результату в простий масив є:

Array.prototype.slice.call(document.querySelectorAll(...));

і тоді ви можете зробити:

Array.prototype.slice.call(document.querySelectorAll(...)).map(...);

Просто додати те, що сказав Півмісяць,

якщо це лише одна функція, яку ви хочете, ви можете зробити щось на зразок NodeList.prototype.map = Array.prototype.map

Не робіть цього! Це зовсім не гарантовано працює.

Жоден стандарт JavaScript або DOM / BOM не вказує на те, що NodeListфункція конструктора навіть існує як глобальна / windowвластивість, або що NodeListповернута особа querySelectorAllуспадковуватиме її, або що її прототип записується, або що функція Array.prototype.mapфактично буде працювати в NodeList.

NodeList дозволено бути "хост-об'єктом" (і є одним, в IE та деяких старих браузерах). Ці Arrayметоди визначаються як буде дозволено працювати на «рідний» об'єкт будь-якого в JavaScript , який надає числові і 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(...){...});

Це прекрасно працює для мене

Це варіант, який я хотів додати до кола інших можливостей, запропонованих тут іншими. Він призначений лише для інтелектуальної забави, і не рекомендується .

Для задоволення це ось спосіб "змусити" querySelectorAllстати на коліна і поклонитися вам:

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

Тепер відчуває себе добре переступити через цю функцію, показуючи, хто це начальник. Тепер я не знаю , що краще, створюючи абсолютно нову ім'я функції обгортки і потім все використовувати ваш код , що дивне ім'я (досить багато JQuery-стилю) або перевизначити функцію , як і вище один раз , так що інша частина коди буде по- , як і раніше мати можливість використовувати оригінальну назву методу DOM querySelectorAll.

• Такий підхід дозволить виключити можливе використання підметодів

Я б не рекомендував це ні в якому разі, якщо тільки ви чесно не дасте [ви знаєте що].