javascript - 获取嵌套子节点javascript的文本

Question

虽然我看了很多关于这个主题的帖子，但我无法得到想要的结果。
我的目标是在纯 JavaScript 中获取嵌套子节点的文本。 使用此代码

function GetChildNodes () {
    var container = document.getElementById ("find");
    for (var i = 0; i < container.childNodes.length; i++) {
        var child = container.childNodes[i];
        if (child.nodeType == 3) {
           var str=child.nodeValue
           console.log(str)
        }
        else {
            if (child.nodeType == 1) {
                var str=child.childNodes[0].nodeValue
                console.log(str)                        
            }
        }
    }
}

GetChildNodes()

如果html是我可以得到文本

<div id="find">
    aaa
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
    <div>aaa</div>
</div>

但是用这样的html代码

<div id="find">
    aaa
    <div>aaa<div>bbb</div></div>
    <div>aaa<div>bbb</div></div>
    <div>aaa</div>
    <div>aaa</div>
</div>

...错了。
你能给我一个解决方案吗？

Answer 1

如果您不需要逐个节点地获取文本，您可以使用 node.textContent 从祖先获取所有文本,

var str = document.getElementById('find').textContent;
console.log(str);

否则，您将需要遍历或递归 DOM 树以查找 nodeType 3 并访问 .data 或 .childNodes 否则，例如递归

function getText(node) {
    function recursor(n) {
        var i, a = [];
        if (n.nodeType !== 3) {
            if (n.childNodes)
                 for (i = 0; i < n.childNodes.length; ++i)
                     a = a.concat(recursor(n.childNodes[i]));
        } else
            a.push(n.data);
        return a;
    }
    return recursor(node);
}
// then
console.log(getText(document.getElementById('find')));