如何遍歷不斷變化的孩子

Question

我正在使用香草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);
    }
}

最后，我需要有一個元素，其中包含發生替換的注釋，以及一個與注釋集一對一匹配的替換值數組。

但是，我遇到以下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>

最終結果應該是：

與數組：

[
    '<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>'
]

但是相反，它似乎早就失敗了，因為子級偽數組不斷在我身上變異，以匹配DOM不斷變化的狀態。

我如何允許子偽數組隨DOM進行更改，同時仍然可以對其進行平滑迭代，並且不存儲已經被替換的元素的內容？

Answer 1

弄清楚了...

我不需要使用實時集合或靜態數組，而需要遍歷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);

Answer 2

向后迭代。

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

這樣可以確保即使您最終刪除了元素，也可以依次看到每個元素。 您甚至可以添加元素並使它正常工作，只要這些添加的元素在添加元素之后。