通过 outerHTML 从 html 集合中删除元素

Question

我有以下代码。我试图通过将 outerHTML 设置为空（''）来删除元素。我也对html collections做了一些研究，发现它是一个live collection

参考：

所以我所知道的是，如果我更改文档，那么列表应该会更改。代码证明了这种行为，尽管我最初的 html 集合长度为 9，但循环运行了 4 次。现在，当我将 outerHTML 替换为 innerHTML 时，循环运行了 9 次。因此，如果列表应该随着文档的更改而更新，为什么当我用 innerHTML

替换 outerHTML 时不会发生这种情况

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

实时集合在其引用的元素发生更改时自行更新。在您的情况下，outerHTML 更改了元素，这更新了集合。但是 innerHTML 是不同的部分。它不是集合引用的内容，因此对子元素的更改不会更新 html 集合。

如果您想使用相同的逻辑删除元素，请使用 While 循环并检查长度是否为 0，并通过第 0 个索引引用删除元素。

 if (captions.length > 1) {

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

        return

    }

Answer 2

这是由于您在引用数组上向前迭代 (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

那么为什么只有在使用 outerHtml 时才会发生这种情况？这样做的原因是 x.innerHtml = "" 清除元素的内容 (<div>test</div> -> <div></div>)，而 x.outerHtml = "" 覆盖元素本身 (<div>test</div> -> ).

通过 outerHTML 从 html 集合中删除元素

Removing element by outerHTML from html collection

javascript

dom

htmlcollection

参考：

使用 outerHTML 时

使用 innerHTML 时