Удаление элемента externalHTML из коллекции html

Question

У меня есть следующий код.Я пытаюсь удалить элемент, установив externalHTML на пустое значение ('').Я также провел небольшое исследование html-коллекций и обнаружил, что это живая коллекция

ref:

• https://idiallo.com/javascript/live-html-collections

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

Итак, все, что я знаю, это то, что если я изменю документ, список должен измениться.Код подтверждает это поведение, и цикл выполняется 4 раза, несмотря на то, что моя исходная коллекция html имеет длину 9. Теперь, когда я заменяю externalHTML на innerHTML, цикл повторяется 9 раз.Поэтому, если список должен обновляться с изменяемым документом, почему этого не происходит, когда я заменяю externalHTML на innerHTML

function expTble() {


    let tables = document.getElementsByTagName("table")

    let captions = document.getElementsByTagName("caption")


    if (captions.length > 1) {

        console.log(`${tables.length} tables ${captions.length} captions`)

        for (let i = 0; i < captions.length; i++) {

            console.log('index : ' + i)

            captions[i].outerHTML = ''

        }

        return

    }

    for (let i = 0; i < tables.length; i++) {
        // Do stuffs
        TableExport(tables[i], { bootstrap: false })
    }



}

Вот мой результат

При использовании outerHTML

9 tables 9 captions 
index : 0 
index : 1 
index : 2 
index : 3 
index : 4

При использовании innerHTML

9 tables 9 captions 
index : 0 
index : 1 
index : 2 
index : 3 
index : 4 
index : 5 
index : 6 
index : 7 
index : 8

Answer 1

Это связано с тем, что вы выполняете итерацию вперед (0-> n) по массиву ссылок, одновременно манипулируя его длиной.Когда вы удаляете элемент i, вы активно сокращаете массив.Как в этом примере:

let arr = ['A','B','C','D','E','F'];
console.log('started');
for (let i = 0; i < arr.length; i++) {
    var removed = arr.splice(i, 0);
    console.log('i:'+i,'Arr:',arr, '(removed ' + i + ')');
}
console.log('ended');

это вывело бы следующее:

started
i:0 Arr: [B,C,D,E,F] (removed A)
i:1 Arr: [B,D,E,F] (removed C)
i:2 Arr: [B,D,F] (removed E)
ended

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

for (let i = captions.length - 1; i >= 0; i--) {
        ...
    }

6 tables 6 captions
index : 5
index : 4
index : 3
index : 2
index : 1
index : 0

Так почему же это происходит только при использовании externalHtml?Причина этого в том, что x.innerHtml = "" очищает содержимое элемента (<div>test</div> -> <div></div>), а x.outerHtml = "" перезаписывает сам элемент (<div>test</div> -> ).

Answer 2

Активная коллекция обновляется при изменении ссылки на элемент. В вашем случае externalHTML изменяет элемент, и это обновляет коллекцию. Но innerHTML - отличная вещь. Это не то, на что ссылается коллекция, поэтому изменения дочернего элемента не обновляют коллекции html.

Если вы хотите удалить элемент, используя ту же логику, используйте цикл «Пока» и проверьте, равна ли его длина 0, и сравним удаляемый элемент с 0-м индексом.

 if (captions.length > 1) {

        while (captions.length > 0) {
            captions[0].outerHTML = ''
        }

        return

    }