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

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

22.06.2017, 14:48. Просмотров 561. Ответов 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
Ответы с готовыми решениями:

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

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

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

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

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

7
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
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
932 / 799 / 385
Регистрация: 11.07.2016
Сообщений: 2,363
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
Модератор
919 / 851 / 493
Регистрация: 05.06.2015
Сообщений: 1,958
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
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
23.06.2017, 17:30 6
Цитата Сообщение от Сергей Мишин Посмотреть сообщение
почему мой пример на работал? Всё по законам js
Именно потому и не работал. Вы проходите циклом for of по NodeList, это не запрещено. Но вот то что вы делаете при каждой итерации не правильно. var an является глобальной и при каждой итерации её значение изменяется, таким образом вы добавляете eventListener для каждого элемента NodeList, но событие onclick асинхронно и будет вызвано только в момент клика, а к тому времени значение an будет равно последнему элементу коллекции. Потому в массив будет пушится именно это значение. А так как при клике на вложенные элементы по умолчанию событие срабатывает и на их родителях (event bubbling) ваш коллбэк будет вызван для каждого родителя элемента по которому произошел клик. Соответственно в массив пушится значение var an, которое равно последнему элементу коллекции и вызывается console.log
0
andrey7287
30 / 27 / 14
Регистрация: 06.01.2016
Сообщений: 150
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
В общем нужен скрипт, для защиты от удаления например Div блока из HTML...

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

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


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

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

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