Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Сергей Мишин
0 / 0 / 1
Регистрация: 19.07.2016
Сообщений: 115
Завершенные тесты: 1
#1

Итерация HTML коллекции - JavaScript

22.06.2017, 14:48. Просмотров 358. Ответов 7

Нужно проитерировать каждый элемент на странице, привязать к нему функцию, чтобы после нажатия на каждый элемент в особый массив будет заносится инфа о нажатом элементе пользователем.

Javascript
1
2
3
4
5
6
7
8
var cache = [] // массив с инфой о нажатом элементе
var anch = document.getElementsByTagName("*") // Все элементы страницы(массив)
for(var an of anch) { // цикл каждого из элементов (пробовал с in, и с ; ; ;)
an.addEventListener("click",function() { // Привязка функции, делал также с onclick
cache.push(an) // добавление элемента !!! также заменял на cache.push(this) но тогда он выводит body, а не сам элемент
console.log(cache) //дебаг
})
}
Порой он выводит undefined на каждой интерации при anch[an] если вместо for...of стоит for...in, иногда в массиве оказывается function namedItem, и не знаю что не так.

!!! дебаг почему-то выводится два раза
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
22.06.2017, 14:48
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Итерация HTML коллекции (JavaScript):

простая итерация
Подскажите пожалуйста как сделать так, чтоб z = 1; 'sizeN"+z+"' = '$sizeN';...

Вхождение подстроки в строку.Ошибка, итерация == undefined
Здравствуй любимый киберфорум. Пишу функцию которая проверяет может ли одна...

В файл HTML записан HTML код с выполнением скрипта. Сформировать новое окно из этого HTML кода (c php)
php используется для взятия переменной с сервера, поэтому требуется php...

В цикле for происходит только одна итерация при наличии вложенного цикла
не подскажите, нужно перебрать варианты перемножения переменных, в php и python...

Как передать данные из одного HTML в другой HTML?
День добрый, скажите пожалуйста, есть два HTML файла каждый делает разную...

Защита от удаления элементов HTML кода из документа HTML
В общем нужен скрипт, для защиты от удаления например Div блока из HTML...

7
Shakalaka
Эксперт HTML/CSS
643 / 547 / 322
Регистрация: 27.01.2015
Сообщений: 1,373
22.06.2017, 16:29 #2
Сергей Мишин, Сергей Мишин,
Javascript
1
2
3
4
5
var cache = [];
document.body.addEventListener('click', function(e){
    cache.push(e.target);
    console.log(cache);
});
0
Сергей Мишин
0 / 0 / 1
Регистрация: 19.07.2016
Сообщений: 115
Завершенные тесты: 1
23.06.2017, 13:00  [ТС] #3
Спасибо огромное, только вопрос, почему мой пример на работал? Всё по законам js
0
Balanaar
833 / 742 / 368
Регистрация: 11.07.2016
Сообщений: 2,218
23.06.2017, 15:43 #4
Цитата Сообщение от Сергей Мишин Посмотреть сообщение
// Все элементы страницы(массив)
1) Метод document.getElementsByTagName() возвращает не массив, а html-коллекцию. Это разные вещи.
2) Никогда не применяйте цикл for (... in ...) для перебора элементов массива по ряду причин.
3) Перебор элементов html-коллекции осуществляется с помощью конструкций
Javascript
1
for (var i = 0; i < collection.length; i++)
или с помощью
Javascript
1
2
3
[].forEach.call(collection, function(el) {
  // ...
});
или других похожих конструкций.
0
j2FunOnly
Модератор
749 / 734 / 439
Регистрация: 05.06.2015
Сообщений: 1,742
23.06.2017, 16:19 #5
Цитата Сообщение от Balanaar Посмотреть сообщение
Перебор элементов html-коллекции осуществляется с помощью конструкций
Javascript
1
for (var i = 0; i < collection.length; i++)
Я бы добавил, что еще существует такое понятие, как live-html коллекция.
An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.
В некоторых ситуациях может привести к интересным результатам:
HTML5
1
2
3
<p>
  pew pew
</p>
Javascript
1
2
3
4
5
6
var paragraphs = document.getElementsByTagName('p');
for(var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].textContent = 'I am paragraph number ' + i;
  document.body.appendChild(document.createElement('p'));
  if (i >= 50) break;
}
jsfiddle
0
Shakalaka
Эксперт HTML/CSS
643 / 547 / 322
Регистрация: 27.01.2015
Сообщений: 1,373
23.06.2017, 17:30 #6
Цитата Сообщение от Сергей Мишин Посмотреть сообщение
почему мой пример на работал? Всё по законам js
Именно потому и не работал. Вы проходите циклом for of по NodeList, это не запрещено. Но вот то что вы делаете при каждой итерации не правильно. var an является глобальной и при каждой итерации её значение изменяется, таким образом вы добавляете eventListener для каждого элемента NodeList, но событие onclick асинхронно и будет вызвано только в момент клика, а к тому времени значение an будет равно последнему элементу коллекции. Потому в массив будет пушится именно это значение. А так как при клике на вложенные элементы по умолчанию событие срабатывает и на их родителях (event bubbling) ваш коллбэк будет вызван для каждого родителя элемента по которому произошел клик. Соответственно в массив пушится значение var an, которое равно последнему элементу коллекции и вызывается console.log
0
andrey7287
22 / 22 / 11
Регистрация: 06.01.2016
Сообщений: 138
24.06.2017, 20:32 #7
Цитата Сообщение от j2FunOnly Посмотреть сообщение
var paragraphs = document.getElementsByTagName('p');
for(var i = 0; i < paragraphs.length; i++) {
* * paragraphs[i].textContent = 'I am paragraph number ' + i;
* document.body.appendChild(document.createElement('p'));
* if (i >= 50) break;
}
Потому что paragraphs.length в переменной надо держать а не вычислять на каждой итерации.
0
j2FunOnly
24.06.2017, 21:20     Итерация HTML коллекции
  #8

Не по теме:

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

0
24.06.2017, 21:20
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.06.2017, 21:20
Привет! Вот еще темы с ответами:

Парсинг HTML, генерация новой HTML страницы
Добрый день. Пишу небольшое расширение для Firefox, используя JS. Общая...

Фильтрация коллекции объектов
Есть объект например var original= и объект var custom= Нужно из...

Как узнать какой элемент по счету в коллекции?
&lt;div&gt; &lt;p&gt;p0&lt;/p&gt; &lt;p&gt;p1&lt;/p&gt; &lt;p&gt;p2&lt;/p&gt; &lt;/div&gt; Пускай я как-то с помощью js...

Как мне обратиться к коллекции элементов с одинаковым ID
У меня есть таблица, в каждой строке все TD имеют одинаковый ID. Как мне...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru