Как JavaScript хранит элементы DOM в переменных?

Я имею в виду, как JavaScript хранит элементы DOM, когда вы делаете что-то вроде:

var foo = document.getElementsByTagName('p');

чем становится фу? массив объектов? и как я могу добавить больше элементов к этой переменной, например:

var bar = document.form[0].getElementsByTagName('input'); // 5 elements
var foo = document.form[1].getElementsByTagName('input'); // 4 elements

bar =+ foo;

for (i=0;i<bar.length;i++){
console.log(bar.value); // 9 logged values
}

можно ли добавить больше элементов одного и того же типа в переменную, в которой уже есть элементы? Должен ли я перебирать все элементы в переменной, которую я хочу добавить, и "нажимать" их в переменной, в которой я хочу все данные?

6
dom javascript

3 ответов

getElementsByTagName (и аналогичные методы, такие как getElementsByName, getElementsByClassName и т. д.) возвращает NodeList (или HTMLCollection в зависимости от браузера, видимо, см. Также разница между HTMLCollection, NodeLists и массивами объектов).

даже если это массив-как объект, т. е. он имеет числовые свойства и .length свойство, вы не можете добавлять к нему новые элементы.

для того, чтобы измените NodeList, вы должны преобразовать его в обычный массив. Это может быть легко достигнуто с помощью метода array .slice и в то же время вы можете объединить оба списка с .concat:

bar = Array.prototype.slice.call(bar).concat(Array.prototype.slice(foo));

это работает, потому что большинство собственных методов массива определяется таким образом, что аргумент не должен быть на самом деле массив, а массив-как объект.

примечательные различия между a NodeList и окончательного выбора являются:

  • массив больше не живет, т. е. коллекция не обновляется автоматически при добавлении новых узлов DOM.
  • элементы в конечном (объединенном) массиве не обязательно будут в порядке документа.
8

bar =+ foo;

это работает только для конкатенации строк и было бы bar+= foo

но и bar и foo здесь являются объектами DOM. так что если вы хотите добавить элементы того же типа, вы можете создать массив.

например,

var myArray =[]
myArray.push(foo);
myArray.push(bar);
1

foo становится функцией. Поэтому вы не сможете добавить foo в bar, потому что это не имеет смысла. Это все равно что пытаться сделать:--2--> 

document.form[0].getElementsByName('input') document.form[1].getElementsByName('input');

вы можете иметь несколько элементов в одном массиве. Я бы нашел, что это самый простой способ достичь вашего решения.

-4