javascript - 如何获取js中元素中存在的任何位置的文本节点

Question

我有一个元素可能是 <p>或<div>或任何其他元素。我想获取所有元素的所有文本节点及其各自的文本。

var nav = document.getElementById('mynav');
function all(el){
     var io = el.getElementsByTagName('*');
        for (var i = 0; i < io.length; i++) {
            var ex = io[i];
            if (ex.firstChild.data.trim() !== '') {
              console.log(ex.firstChild)
            }
          } 
}

all(nav);

<div id="mynav">
  text1
  <div style="border:1px solid red; height:100px;">
     text2
       <div style="border:1px solid green; height:80px;">
         text3
           <div style="border:1px solid orange; height:60px;">
             <div style="border:1px solid blue; height:40px;">
               text5
             </div>
             text4
           </div>
       </div>
  </div>   
</div>

我的代码的作用是什么？

我的上面的程序给出了三个包含文本的文本节点(text2、text3和text5)。

我想做什么？

我想获取包含所有文本的所有文本节点，即(text1、text2、text3、text4和text5)，即使我的文本(即:text4)位于包含text5的div的后面。

我认为可以通过使用元素的子节点数组来实现，但不确定。

我们该如何解决这个问题，请帮助我。

请不要使用jquery。

Answer 1

如果您使用 DOM .createTreeWalker() 方法，我们可以很容易地找到所有的文本节点。

.createTreeWalker() 将比大多数其他方法更快。

您会注意到，即使是空白内容也会包含在结果中(这当然是正确的，因为空白仍然是文本)。但是，如果您不想这样做，可以在 .nodeValue 上调用 .trim() 来清理它。

function textNodesUnder(el){
  var n, a=[];  // Text nodes will be stored here
  
  // Create TreeWalker object that only looks for text nodes
  var walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
  
  // Loop until we are out of nodes
  while(n = walk.nextNode()) {
    a.push(n);      // Add found text node to array
  }
  return a;  // Return the array
}

// Run function and store returned array
var textNodes = textNodesUnder(document.getElementById('mynav'));

// Loop over the results
textNodes.forEach(function(node){
  console.log(node.nodeValue);
});

<div id="mynav">
  text1
  <div style="border:1px solid red; height:100px;">
     text2
       <div style="border:1px solid green; height:80px;">
         text3
           <div style="border:1px solid orange; height:60px;">
             <div style="border:1px solid blue; height:40px;">
               text5
             </div>
             text4
           </div>
       </div>
  </div>   
</div>