Конкатенация массивов объектов HTML с помощью JavaScript

Question

Я пытаюсь объединить два массива, состоящих из объектов HTML. По какой-то причине использование.concat() не будет работать для меня.

Вот простая ручка, чтобы продемонстрировать проблему: http://codepen.io/anon/pen/kIeyB

Примечание: я пытался найти что-то похожее, но не нашел ничего, что ответило бы на мой вопрос.

Я полагаю, что вы можете сделать это по-старому, используя петли for, но я не буду изобретать велосипед заново.

var x = document.getElementById("hello");
var items = x.getElementsByClassName("one");
//alert(items.length);
var items2 = x.getElementsByClassName("two");
//alert(items2.length);
items = items.concat(items2);
//alert(items.length);

Answer 1

items а также items2 являются nodeList или же HTMLCollection объекты, а не массивы. Они не содержат .concat() метод. У них есть .length собственность и поддержка [x] индексация, но у них нет других методов массива.

Обычный обходной путь для копирования их в реальный массив заключается в следующем:

// convert both to arrays so they have the full complement of Array methods
var array1 = Array.prototype.slice.call(x.getElementsByClassName("one"), 0);
var array2 = Array.prototype.slice.call(x.getElementsByClassName("two"), 0);

Answer 2

Это также можно сделать так:

var allitems = [];
allitems = Array.prototype.concat.apply(allitems, x.getElementsByClassName("one"));
allitems = Array.prototype.concat.apply(allitems, x.getElementsByClassName("two"));

allitems переменная будет один JavaScript Array содержащий все элементы с классом one & two,

Answer 3

documnent.getElementsByClassName

не возвращает массив.

он возвращает nodeList, который имеет свойство length.

Answer 4

У вас есть HTMLCollections, которые хоть и ведут себя как массивы, но не являются массивами. Смотрите здесь: https://developer.mozilla.org/en/docs/Web/API/HTMLCollection:

..Коллекция - это объект, представляющий списки узлов DOM.

В вашем случае вы могли бы объединить эти объекты вместе в новый массив:

var itemsnew;
var x = document.getElementById("hello");
var items = x.getElementsByClassName("one");
var items2 = x.getElementsByClassName("two");
itemsnew = Array.prototype.concat.call(items, items2);

Теперь, если вы:

console.log(itemsnew);

Вернусь:

[HTMLCollection[1], HTMLCollection[1]]

А также:

console.log(itemsnew[0][0]);

Вернусь:

<div class="one"></div>