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或{ {1}}否则，例如递归

.childNodes

Answer 2

由于我的目的是在文本等于字符串时更改嵌套元素中的文本，因此感谢Paul S的建议我可以这样解决我的问题

<script type="text/javascript">
function GetChildNodes (container) {
    function recursor(container){
            for (var i = 0; i < container.childNodes.length; i++) {
                var child = container.childNodes[i];
                if(child.nodeType !== 3&&child.childNodes){
                    recursor(child);
                }else{
                    var str=child.nodeValue;
                    if(str.indexOf('bbb')>-1){child.nodeValue='some other text'};
                    };
             };
    };
    recursor(container);
};
var container = document.getElementById ("find");
GetChildNodes(container);
</script>

再次感谢保罗！

Answer 3

这是因为您只检查childNodes的{{1}}，而不检查子节点的子节点，然后继续。

元素可以拥有的子元素数量没有限制，因此每次都应该有一个find循环或递归函数。

你为什么不这样做：for？

Answer 4

保罗回答的简短版本

function getText(node) {
  if (node.nodeType == 3) return node.data; // text node
  if (!node.childNodes) return '';
  let s = '';
  for (let i = 0; i < node.childNodes.length; i++) {
    s += getText(node.childNodes[i]);
  }
  return s;
}

获取嵌套子节点javascript的文本

4 个答案: