JavaScript - Свяжите несколько NodeLists вместе
Я первоначально просил изящный способ моделировать Array.concat() функциональность на результатах getElementsByTagName функция в IE или более старых браузерах, потому что это казалось этим concat не поддерживался. Только, конечно, это - причина, возвращенный объект не поддерживал его, то, потому что это не Array. Ой!
getElementsByTagName на самом деле возвраты a NodeList. Реальный вопрос, затем: что хороший путь состоит в том, чтобы заставить единственный список всех элементов формы в документе (вход, выбор, текстовая область, кнопка) циклично выполнять через них? Массив не требуется... сингл NodeList было бы прекрасно, также.
Обратите внимание, что я использую IE6, как это для корпоративной интранет (скоро IE8 хотя).
Ответ, который я придумал, был:
Это стало более простым и вероятно выполненным лучше, чтобы просто поместить код в отдельную функцию, и назовите его три раза с другим nodelists, вместо того, чтобы волнуйтесь о хорошем способе переполнить их вместе в одного.
Я в конечном счете переключился на использование MooTools (после того, как несколько часов, читая на сравнениях всех различных платформ). Таким образом, теперь получая массив объектов я хочу, очень просто. Я рекомендую использовать платформу JavaScript как это, а не люди, побеждающие их мозги, пытаясь выяснить лучший способ сделать вещи. Конечно, я - все для того, чтобы на самом деле выучить необработанный язык (который является, почему я удержал использовать платформу так долго), но это - не всегда самый быстрый способ получить вещи, идущие, который в бизнесе часто имеет значение так же как улучшение способности кодера с языком.
Обновление: почти 2 года спустя я просто использовал бы jQuery и был бы сделан с ним!
2 ответа
Чтобы объединить списки узлов, преобразуйте их в массивы, используя Array.prototype.slice.call , а затем объедините их обычным образом.
var a = Array.prototype.slice.call(document.getElementsByTagName("p")),
b = Array.prototype.slice.call(document.getElementsByTagName("div"))
var c = a.concat(b);
Изменить: (ответ на ваш комментарий)
Если у вас есть только несколько типов элементов, это нормально, но производительность снижается с увеличением количества вызовов DOM, которые вы делаете. Может быть лучше и быстрее выполнить document.getElementsByTagName ('*') , пройтись по списку и выбрать элементы с требуемым nodeName .
Также следует иметь в виду, что использованный выше метод Array.prototype.slice может не работать во ВСЕХ браузерах. Посмотрите на начальную строку комментария # 723 в sizzle.js (механизм выбора, стоящий за jQuery)
. Конечно, лучше всего использовать библиотеку, такую как jQuery, которая справляется со всей головной болью. Вы можете просто сделать:
$("input, select, textarea, <other tags>")
var a1=document.getElementsByTagName('div'),
a2=document.getElementsByTagName('button');
a1=[].slice.call(a1, 0,a1.length).concat([].slice.call(a2, 0,a2.length))