Особенности массива элементов DOM

@ChildOfFlowers · Регистрация: 16.04.2012

Студворк — интернет-сервис помощи студентам

Всем привет.
У меня тут интересная ситуация возникла, никогда бы не подумал, что такое может быть. И главное, ума не приложу, почему так, и что с этим делать... Видимо, я чего - то не знаю про DOM.
В общем, имеется страница, на которой расположено несколько DIV'ов, каждому из которых присвоен ID 1, 2, 3, и т.д.
Создаю массив с ними:

JavaScript
1
var divs = document.getElementsByTagName("div");

Проверяю, что в массиве:

JavaScript
1
for(var i = 0; i < divs.length; i++){document.write(divs[i].id);}

Результат, естественно, 123...
Теперь хочу поменять элементы массива местами:

JavaScript
1
2
3
var temp = divs[1];
divs[1] = divs[0];
divs[0] = temp;

Проверяю снова, как и в первый раз. По идее, должно получиться 213... А он мне опять выдаёт 123, как будто вообще ничего не менялось. Как так - то?

@newJS · 04.03.2013, 20:58

Это не перемена местами двух элементов, в этом массиве divs не элементы, а ссылки на элементы, типа адрес.
Чтобы поменять местами элементы, нужно их удалить, а потом вернуть в нужной последовательности.

Зачем это нужно?

P.S.
тут есть скрипт, в нем картинки переставляются местами при достижении края, замыкаются в кольцо, посмотри как оно там сделано.

@ChildOfFlowers · 04.03.2013, 21:49 **[ТС]**

Про то что там ссылки, я и сам догадывался, ну и что с того? Если я ссылку на второй объект поставил в начало массива, то при проверке первым должен выводиться второй объект. Потому что я массив по порядку перебираю, и первой в нём попадается ссылка именно на второй объект. А он мне первый объект выдаёт, как будто его ссылка была первой! Более того, когда я создаю независимую переменную, и присваиваю ей значение N-ной ячейки массива, то всё работает нормально. В переменной оказывается ссылка именно на тот объект, на который ссылалась N-ная ячейка массива... Ничё не могу понять - толи я дурак, толи лыжи не едут! По какому там принципу ссылки в массиве привязываются к объектам?
Зачем мне это нужно? Долго объяснять. В принципе, конечно, я и без этого могу обойтись, пойти окольными путями (хотя код переписывать неохота). Тут уже просто дело интереса... хочу разобраться.

@Mysterious Light · 05.03.2013, 19:26

Сообщение от newJS

Это не перемена местами двух элементов, в этом массиве divs не элементы, а ссылки на элементы, типа адрес.

И именно поэтому и не понятно, почему не работает.
Fix it:

JavaScript
1
2
3
4
5
6
7
8
9
10
function showIds(divs) { var s=""; for(var i = 0; i < divs.length; i++) s+=(divs[i].id); alert(s); } 
function getDivs() { return Array.prototype.slice.call(document.getElementsByTagName("div")); }
function a() {
    var divs = getDivs();
    showIds(divs);
    var temp = divs[1];
    divs[1] = divs[0];
    divs[0] = temp;
    showIds(divs);
}

@ChildOfFlowers · 05.03.2013, 20:46 **[ТС]**

Заработало!!!1!

Спасибо!
А можно теперь для особо одарённых объяснить на пальцах, что это за волшебная строчка "Array.prototype.slice.call", и почему без неё не получалось? У меня сложилось впечатление, что я совсем неправильно представляю, что там внутри этого несчастного массива происходит....

@Mysterious Light · 06.03.2013, 11:48

JavaScript
1
alert(document.getElementsByTagName('div') instanceof Array); // trollface

@ChildOfFlowers · 07.03.2013, 17:30 **[ТС]**

Честно говоря, мало что понял... эти все методы мне незнакомы.
В общем, мне ещё учиться и учиться.

@resource2008 · 12.03.2013, 02:26

Сообщение от ChildOfFlowers

Создаю массив с ними:

JavaScript
1
var divs = document.getElementsByTagName("div");

это не массив, это html коллекция, которая на самом деле объект, динамически завязанный на DOM.
вообще рекомендуют, если необходимо оперировать списком элементов страницы, копировать ссылки из коллекции в свой массив/объект.

п.с.:

Сообщение от Mysterious Light

// trollface

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,531
	04.03.2013, 20:58
	Это не перемена местами двух элементов, в этом массиве divs не элементы, а ссылки на элементы, типа адрес. Чтобы поменять местами элементы, нужно их удалить, а потом вернуть в нужной последовательности. Зачем это нужно? P.S. тут есть скрипт, в нем картинки переставляются местами при достижении края, замыкаются в кольцо, посмотри как оно там сделано. 0

@ChildOfFlowers 15 / 14 / 9 Регистрация: 16.04.2012 Сообщений: 1,091
	04.03.2013, 21:49 [ТС]
	Про то что там ссылки, я и сам догадывался, ну и что с того? Если я ссылку на второй объект поставил в начало массива, то при проверке первым должен выводиться второй объект. Потому что я массив по порядку перебираю, и первой в нём попадается ссылка именно на второй объект. А он мне первый объект выдаёт, как будто его ссылка была первой! Более того, когда я создаю независимую переменную, и присваиваю ей значение N-ной ячейки массива, то всё работает нормально. В переменной оказывается ссылка именно на тот объект, на который ссылалась N-ная ячейка массива... Ничё не могу понять - толи я дурак, толи лыжи не едут! По какому там принципу ссылки в массиве привязываются к объектам? Зачем мне это нужно? Долго объяснять. В принципе, конечно, я и без этого могу обойтись, пойти окольными путями (хотя код переписывать неохота). Тут уже просто дело интереса... хочу разобраться. 0

@ChildOfFlowers 15 / 14 / 9 Регистрация: 16.04.2012 Сообщений: 1,091
	05.03.2013, 20:46 [ТС]
	Заработало!!!1! Спасибо! А можно теперь для особо одарённых объяснить на пальцах, что это за волшебная строчка "Array.prototype.slice.call", и почему без неё не получалось? У меня сложилось впечатление, что я совсем неправильно представляю, что там внутри этого несчастного массива происходит.... 0

@ChildOfFlowers 15 / 14 / 9 Регистрация: 16.04.2012 Сообщений: 1,091
	07.03.2013, 17:30 [ТС]
	Честно говоря, мало что понял... эти все методы мне незнакомы. В общем, мне ещё учиться и учиться. 0