Javascript 如何迭代更改子对象集

我使用香草javascript迭代元素的子元素，并根据类删除它们。但是，我在处理嵌套元素时遇到了麻烦

以下是代码的简化版本：

var replacements = [];
var children = el.getElementsByTagName('*');
for(var i = 0; i < children.length; i++) {
    var child = children[i];
    if(should_delete(child)) { /*just checking for the class "delete-me"*/
        replacements.push(child.outerHTML);
        var filler = document.createComment('deleted');
        child.parent.replaceChild(child);
    }
}

var替换=[]；
var children=el.getElementsByTagName（'*'）；
对于（变量i=0；i

最后，我需要一个元素，其中包含发生替换的注释，以及一个与注释集一一匹配的替换值数组

但是，我对以下html有问题

<div class="wrap">
    <div class="outer">
        <div class="delete-me">test</div>
        <div class="delete-me">
            <div class="delete-me">test2</div>
            <div class="delete-me">test3</div>
        </div>
        <div class="delete-me">test4</div>
    </div>
    <div class="delete-me">test5</div>
</div>

测试
测试2
测试3
测试4
测试5

最终结果应该是：

使用阵列：

[
    '<div class="delete-me">test</div>',
    '<div class="delete-me"><div class="delete-me">test2</div><div class="delete-me">test3</div></div>',
    '<div class="delete-me">test4</div>',
    '<div class="delete-me">test5</div>'
]

[
"测试",，
“test2test3”，
"test4",，
“测试5”
]

但是，它似乎很早就失败了，因为子伪数组在我身上不断变化，以匹配DOM不断变化的状态

如何允许子伪数组随DOM更改，同时仍在其上平滑迭代，而不存储已替换元素的内容？

向后迭代

for( i = children.length-1; i>=0; i--)

这将确保，即使最终删除元素，也会依次看到每个元素。您甚至可以添加元素并使其正常工作，只要这些添加的元素在添加它们的元素之后出现。

解决了这个问题

我需要在dom树中递归，边删除边使用，而不是使用活动集合或静态数组

var replacements = [];
var processChildren = function(children) {
    var children_a = []; // this array exists so that children wont change as we delete elements
    for(var i = 0; i < children.length; i++) {
        children_a.push(children[i])
    }
    for(var i = 0; i < children_a.length; i++) {
        var child = children_a[i];
        if(should_delete(child)) { /*just checking for the class "delete-me"*/
            replacements.push(child.outerHTML);
            var filler = document.createComment('deleted');
            child.parent.replaceChild(filler, child);
        } else {
            processChildren(child.children);
        }
    }
}
processChildren(el.children);

var替换=[]；
var processChildren=函数（子函数）{
var children_a=[]；//此数组的存在使子元素在我们删除元素时不会改变
对于（变量i=0；i

getElementsByTagName

返回一个实时集合，该集合将从您下方更改；相反，请尝试返回静态集合的

querySelectorAll

，或者如果您只需要子对象，则只需像

children

getElementsByTagName

这样的属性返回一个“live”节点列表，因此当您修改DOM时，它会被更新。将其更改为

var children=Array.prototype.slice.call（el.getElementsByTagName（'*'）

可能会有所帮助——不管怎样，它至少会让循环停止做一件错误的事情——但我不明白“不存储已替换元素的内容”是什么意思。列出的预期结果是否真的与此匹配…？很遗憾您没有使用jQuery<代码>$（'.delete me'）。删除（）会简单得多。话虽如此，我不确定类名（应该是

deleteMe

）@torazaburo中是否允许使用破折号-我想我实际上需要一个活动集合，来做我想做的事情，因为我需要删除子类（如嵌套示例中所示），而不是迭代它们。如果我的子对象不是活动的，那么当我删除一个元素时，它的子对象仍然在子对象集中，并且仍然是活动的processed@ryan-ohara-见我之前对torazaburo的回应。我相信我需要一个活动集合来不处理嵌套的子对象。这会导致我在删除子对象之前先迭代子对象，存储它们的值，而不知道需要删除父对象，因此只存储父对象的值。