递归遍历 Shadow 和 Light DOM答案

【问题标题】：Walk through Shadow and Light DOM recursively递归遍历 Shadow 和 Light DOM
【发布时间】：2015-11-18 12:50:26
【问题描述】：

我正在尝试递归地遍历阴影和光 DOM（寻找第一个 input，无论它在哪里）。这似乎不是一个很难的任务，所以我写了以下代码

recursiveWalk: function(node, func) {
    var done = func(node);
    if(done){
        return true;
    }

    if('root' in node){
        this.recursiveWalk(node.root, func);
        if(done){
            return true;
        }
    }

    node = node.firstChild;
    while (node) {
        var done = this.recursiveWalk(node, func);
        if(done){
            return true;
        }
        node = node.nextSibling;
    }
}

由于我似乎无法弄清楚的原因而最终进入无限循环（我猜这与以下事实有关，即在 light DOM 中的元素可以再次在 shadow DOM 中找到，但在影子 DOM 不必在光 DOM 中，但不是每个元素都有影子 DOM……所以我被卡住了）。

【问题讨论】：

在函数结束时返回true，因为存在done永远不会为true的情况
你为什么使用 node.firstChild 而不是 node.nextSibling？你会遍历孩子还是兄弟姐妹？
@jan：这将导致它在阴影上进行递归遍历后立即完成整个函数，它应该只在 func 返回true 时完成return true 或在遍历时不返回任何内容一无所获。
@jan: firstChild 下降一个级别，然后nextSibling 继续探索该级别，通过this.recursiveWalk 下降每个元素...
好的，当你从第一个孩子开始时，你失去了一些兄弟姐妹，最好从第一个兄弟姐妹开始并使用this.recursiveWalk(node.firstChild, func)中的第一个孩子，但这不是无限的原因循环。

标签： javascript html dom shadow-dom

【解决方案1】：

解决方案是等待聚合物准备好：

document.addEventListener('polymer-ready', function() {
    recursiveWalk(document.body, function (node) {
        console.log(node.nodeName);
    });
})

并使用 shadowDom 属性：

if ('shadowRoot' in node &&  node.shadowRoot) {
    var done = recursiveWalk(node.shadowRoot, func);
    if (done) {
       return true;
    }
}

http://jsfiddle.net/za1gn0pe/7/

【讨论】：