[javascript] zmniejszenie długości typu HTMLCollection po wykonaniu funkcji DOM.

Question

'use strict';
this.img = document.getElementByTagName('img')
for......{
    this.img[i].parentNode.replaceChild(this.can[i], this.img[i]);
    this.img[i].outerHTML = this.can[i].outerHTML;

}

typeof this.img => HTMLCollection;

this.img.lenght => 6

console.dir(this.img) =>  [img, img, img]

 

Pytanie:

Czemu wykonanie pierwszej lub drugiej linii kodu usuwa element z tablicy zamiast zamiast zamienić go nową wartością, Wyświetlenie zawartości tablicy IMG daje połowę elementów niż jej długość. Różne przeglądarki inaczej interpretują kod ale zawsze z błędami.

 

Answer 1

Zacznijmy od tego, że w DOM istnieją 2 typy kolekcji: żywe i statyczne. Te drugie są zwracana przez metodę document.querySelectorAll, a pierwsze - przez wszystkie metody document.getElementsBy*.

Jak zatem widać, w przypadku tej kolekcji każda zmiana w DOM będzie odnotowana.

Niemniej przydałoby się działające demo, bo tak nie do końca wiadomo, jakie niby "błędy" popełnia przeglądarka. Kodu jest za mało.