Что за очень странное поведение?

Question

[jasonOk]

Столкнуля с необъяснимым поведением при проходе циклом по HTML коллекции.

Есть contenteditable, внутри разный текст и несколько картинок emoji img с alt атрибутом в виде самой эмодзи.

При событии keyup мне нужно пройтись циклом по всем тегам img и заменить их на контент из alt атрибута.
Вот тут и возникает проблема — каждый второй img игнорируется и я не понимаю почему.

Чтобы во всём разобраться живой пример.

Comments

[Николай]

iamevg_, видите 2ой эмодзи отличается по стилю от первого и третьего? Это его пропустили и это все еще картинка, а не текст

Answer 1

[Николай]

Поведение как раз не странное. Вот что бывает, когда над итерируемым объектом совершают какие-то преобразования.
div.children - это NodeList, вы его меняете внутри forEach, и сбиваете итератор тем самым.
Чтобы этого не происходило нужно получить объект класса Array и выполнять итерацию уже по нему.
Чтобы это сделать можно использовать либо Array.from, либо Array.prototype.slice.call(div.children)

Answer 2

[suberg]

Вот так работает:

Array.from(div.children).forEach(function (elem) {
  if (elem.tagName === 'IMG') {
    div.replaceChild(
      document.createTextNode(elem.getAttribute('alt')), elem);
  }
});

Нужно итерироваться по массиву