Почему метод forEach пропускает (не обрабатывает их) вложенные элементы?

Question

[Shimpanze]

Добрый день!

Имеется HTML-разметка:

<div>
  <span class="foo">Level 1.
    <span class="foo">Level 2.</span>
  </span>
  <br>
  <span class="foo">Level 1.
    <span class="foo">Level 2.</span>
  </span>
</div>

Необходимо обернуть все элементы с классом «.foo» в некую метку (в данном случае - «[e]...[/e]»).

Пишу соответствующий код:

[].forEach.call(document.querySelectorAll('span.foo'), function(e) {
  e.outerHTML = '[e]' + e.outerHTML + '[/e]';
});

Но он оборачивает элементы только верхнего уровня, а внутренние пропускает. То есть на выходе получается такое:

<div>
  [e]
    <span class="foo">Level 1.
      <span class="foo">Level 2.</span>
    </span>
  [/e]
  <br>
  [e]
    <span class="foo">Level 1.
      <span class="foo">Level 2.</span>
    </span>
  [/e]
</div>

А мне надо такое:

<div>
  [e]
    <span class="foo">Level 1.
      [e]
        <span class="foo">Level 2.</span>
      [/e]
    </span>
  [/e]
  <br>
  [e]
    <span class="foo">Level 1.
      [e]
        <span class="foo">Level 2.</span>
      [/e]
    </span>
  [/e]
</div>

Гугление навело на мысль, что здесь нужно использовать метод indexOf(). Но зачем он здесь и как его использовать, я так и не понял.

P.S. Я в курсе про «for(...)»,
P.P.S. Необходимо сделать именно на «forEach».

Спасибо!

Answer 1

[Анатолий Медведев]

На самом деле все просто. outerHTML перезаписывает элемент, то есть когда вы записываете у родителя outerHTML, то ребенка на которого ссылается ранее сделанная ссылка уже не существует, там уже новый элемент.

Comments

[Rsa97]

Добавлю, используйте insertAdjacentText.

[Shimpanze]

Ёлки-палки, но почему вот эта-то конструкция, тогда, прекрасно работает?

let e = document.querySelectorAll('.foo');

for (let i = e.length; i--;) {
  e[i].outerHTML = `[e]${e[i].outerHTML}[/e]`;
}

[Medin K]

Shimpanze, из-за обхода с конца.

[Анатолий Медведев]

Shimpanze, элементы в коллекции лежат исходя из положения в доме. Поэтому обратным обходом получается получить нужный результат т.к. сначала изменяется самый глубокий потомок.

[Shimpanze]

Анатолий Медведев, А forEach нельзя заставить так работать (просто в целях повышения опыта)?

[Анатолий Медведев]

Shimpanze, насколько мне известно нет. Но можно написать версию которая будет работать в обратном направлении так:

if (window.NodeList && !NodeList.prototype.forEachReverse) {
    NodeList.prototype.forEachReverse = function (callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = this.length; i--;) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}

Ну и теперь можно сделать так

document.querySelectorAll('span.foo').forEachReverse(function(e) {
  e.outerHTML = '[e]' + e.outerHTML + '[/e]';
});

PS: возможны ошибки, код не проверял.