获取嵌套子节点javascript的文本

Posted 2023-02-19

【中文标题】获取嵌套子节点javascript的文本

【英文标题】：Get text of nested childnodes javascript

【发布时间】：2014-05-26 15:23:36

【问题描述】：

虽然我已经阅读了很多关于这个主题的帖子，但我无法得到想要的结果。 我的目标是在纯 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>

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

【参考方案1】：

这是因为您只检查childNodes 的find，而不是子节点的子节点，它继续。

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

你为什么不直接做：document.getElementById('find').textContent;？

【参考方案2】：

如果您不需要逐个节点获取文本，您可以使用 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')));

【讨论】：

：我知道我可能要求太多了，但是我将如何更改包含 b 文本的标签的文本？无论如何，谢谢你的代码很棒。

不要返回n.data，而是返回n，这样你就可以再次循环测试/操作，或者立即对n执行操作

：再次感谢您的想法，我可以这样解决：function GetChildNodes (container) function recursor(container) for (var i = 0; i -1)child.nodeValue='some other text' recursor(container) var container = document.getElementById ("find"); GetChildNodes(容器)

【参考方案3】：

由于我的目的也是在文本等于字符串时更改嵌套元素中的文本，感谢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>

再次感谢保罗！

【参考方案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;