javascript - 如何在 Javascript 中将 DOM 节点递归到任意深度？

Question

我真的很难理解 DOM 中的跨浏览器递归。我只想获取节点的文本内容，而不是任何 HTML 标签或其他信息。通过反复试验，我发现 textContent 和 innerText 属性并不适用于所有浏览器，因此我必须使用 data 属性。

现在我的功能是这样的:

    getTextContentXBrowser: function(nodeIn) {
        // Currently goes down two levels. Need to abstract further to handle arbitrary number of levels
        var tempString = '';
        for (i=0, len=nodeIn.childNodes.length; i < len; i++) {
            if (nodeIn.childNodes[i].firstChild !== null) {
                tempString += nodeIn.childNodes[i].firstChild.data;
            } else {
                if (nodeIn.childNodes[i].data && nodeIn.childNodes[i].data !== '\n') {
                    tempString += nodeIn.childNodes[i].data;
                }
            }
        }
        return tempString;
    },

它是用对象表示法编写的，但除此之外它是一个非常标准的不起眼的函数。它下降了两个级别，这几乎足以满足我想做的事情，但如果可能的话，我想“设置并忘记它”。

我已经研究了四个小时，但我无法将其抽象到任意数量的级别。递归是我最好的选择吗？我错过了更好的选择吗？我如何将上述函数转换为递归？

感谢您的帮助!

更新:我根据 dsfq 的模型重写了它，但由于某种原因，它下降了一级并且之后无法返回。我意识到我之前的问题是我没有在第二个 if 子句中连接，但这似乎使我无法实现目标。这是我更新的功能:

    getTextContentXBrowser: function(nodeIn) {
        var tempString = '';
        for (i=0, len=nodeIn.childNodes.length; i < len; i++) {
            if (nodeIn.childNodes[i].data) {
                tempString += nodeIn.childNodes[i].data;
            } else if (nodeIn.childNodes[i].firstChild) {
                tempString += this.getTextContentXBrowser(nodeIn.childNodes[i]);
            }
        }
        return tempString.replace(/ /g,'').replace(/\n/g,'');
    },

有人看到我遗漏了什么吗？

Answer 1

您是否考虑过使用 jQuery 执行此操作？

getTextContentXBrowser: function(nodeIn) {
    return $(nodeIn).text();
}

就这么简单!