javascript - 循环遍历 div 的所有后代 - 仅限 JS

Question

我一直在使用 jQuery 来执行此操作:

$element.find("*").each(function() {
    var $this = $(this);

    $this.removeAttr("style width align");

    if ($this.is("embed")) {
        $element.append("<div class='video'></div>");
        $this.attr("width", 640).attr("height", 360).parent().appendTo("#" + element + " .video");
    };
});

但我一直在阅读 jQuery 的 .each()与简单的 for 循环( jsPerf)相比，该方法非常慢。我的问题是如何用纯 JS 来模仿这个？查找 div 中的所有元素，然后遍历节点。

我试图搜索这个，但我似乎只能找到 jQuery 答案 - 无处不在。

我已经尝试过其他事情，但这与我选择所有后代一样接近:

var children = document.getElementById('id').getElementsByTagName('*');

for( var i = 0; i<children.lengtth; i++){
    children[i].removeAttribute("style");
    console.log(children[i]);
}

Answer 1

你已经做对了

var ancestor = document.getElementById('id'),
    descendents = ancestor.getElementsByTagName('*');
    // gets all descendent of ancestor

现在你只需要循环 children

var i, e, d;
for (i = 0; i < descendents.length; ++i) {
    e = descendents[i];
    e.removeAttribute('style');
    e.removeAttribute('width');
    e.removeAttribute('align');
    if (e.tagName === 'EMBED') {
        d = document.createElement('div');
        d.setAttribute('class', 'video');
        ancestor.appendChild(d);
    }
}

取决于你在做什么，因为你正在使用 getElementsByTagName获取 descendents , descendents是 直播 NodeList，因此它的长度会随着您向 ancestor 添加更多节点而改变.如果您需要避免这种情况，请在循环之前将其转换为数组

decendents = Array.prototype.slice.call(decendents);

见 this gist对于可重用的功能。