Javascript 仅在div-JS的所有子代中循环

我一直在使用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");
    };
});

---

你已经做对了

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

现在，您只需在

子项上循环

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);
    }
}

有关可重用函数的信息，请参阅。
您能使用这样简单的功能吗

    // get a handle to the div you want.
var div = document.getElementById('someID'),
    // get an array of child nodes
    divChildren = div.childNodes;

for (var i=0; i<divChildren.length; i++) {
    divChildren[i].style.width = null;
    divChildren[i].style.textAlign = null;
}

//获取所需div的句柄。
var div=document.getElementById（'someID'），
//获取子节点数组
divchildrends=div.childNodes；
对于（var i=0；i我在@Paul S.的回答中评论说，您也可以克隆节点并使用文档片段添加新的嵌入。以下是一个示例：

HTML:

<div>
    <div id="container">
        <div align="right">child</div>
        <div align="center">child</div>
        <embed src="" width="0" height="0" />
        <div align="center">child</div>
        <div style="width: 40px">child</div>
        <div style="font-size: 100px">child</div>
        <div width="60%">child</div>
        <embed src="" width="0" height="0"/>
        <div width="60%">child</div>
    </div>
</div>

var elm,
    clone,
    doc,
    next,
    fragment,
    live = document.getElementById("container");

if (live !== null) {
    fragment = document.createDocumentFragment();
    clone = live.cloneNode(true);
    next = clone.firstChild;
    while(next !== null) {
        if (next.nodeName !== "#text") {
            next.removeAttribute('style');
            next.removeAttribute('width');
            next.removeAttribute('align');

            if (next.tagName === 'EMBED') {
                doc = document.createElement('div');
                doc.setAttribute('class', 'video');
                doc.innerHTML = "EMBED detected, adding div...";
                fragment.appendChild(doc);
            }
        }
        next = next.nextSibling;
    }
    clone.appendChild(fragment);
    live.parentNode.replaceChild(clone, live);
}

你可以看到演示

克隆节点可防止对DOM进行实时修改，因为style属性的属性会导致浏览器多次重新绘制。
您可以使用querySelectorAll的forEach函数

document.querySelectorAll（'li'）.forEach（函数（元素）{
控制台日志（元素）；
});
jquery存在的原因正是这样……它可能会慢一些（很重要……），但它可以在所有浏览器上工作……您真的想迭代dom树并使其在所有浏览器上工作吗？[].slice.call（elm.children）提供一个元素子元素数组，而[].slice.call（elm.childNodes）提供一个元素子元素数组包括文本节点。getElementsByTagName（）将比直接子级更深入，如果你想要的话。@Rufinus我真的不想这样做，但负责人对jQuery的感觉不好。在这种情况下，我循环了很多元素（5k+）看看Zepto，也许他们会喜欢，或者至少是spirit，你会喜欢“使用jquery”来编码……你为什么要移动
$this.parent（）
-那肯定是
$element
，这是您正在迭代其子元素的元素。由于它是一个活动列表，我是否必须转换为数组，或者我是否可以在开始循环时及时保存长度？@JonnySooter如果它是活动的会导致问题，我建议始终将其转换为数组，使用“如果您想删除列表中的节点，向下循环可能更容易。@Paul S。我将嵌入节点从祖先列表中移动，并将其附加到
d
设备中。这算吗？@Paul S。为什么不克隆元素并使用文档片段进行插入，这样您就不必担心与live node交互？”es？@JonnySooter您所做的不仅仅是删除这里的节点，所以我要说的是转换为非活动，不要再担心它了。
<div>
    <div id="container">
        <div align="right">child</div>
        <div align="center">child</div>
        <embed src="" width="0" height="0" />
        <div align="center">child</div>
        <div style="width: 40px">child</div>
        <div style="font-size: 100px">child</div>
        <div width="60%">child</div>
        <embed src="" width="0" height="0"/>
        <div width="60%">child</div>
    </div>
</div>

var elm,
    clone,
    doc,
    next,
    fragment,
    live = document.getElementById("container");

if (live !== null) {
    fragment = document.createDocumentFragment();
    clone = live.cloneNode(true);
    next = clone.firstChild;
    while(next !== null) {
        if (next.nodeName !== "#text") {
            next.removeAttribute('style');
            next.removeAttribute('width');
            next.removeAttribute('align');

            if (next.tagName === 'EMBED') {
                doc = document.createElement('div');
                doc.setAttribute('class', 'video');
                doc.innerHTML = "EMBED detected, adding div...";
                fragment.appendChild(doc);
            }
        }
        next = next.nextSibling;
    }
    clone.appendChild(fragment);
    live.parentNode.replaceChild(clone, live);
}