js 循环dom中的节点 直到找到节点里的文本内容（递归）

1. 今天遇到一个需求是，需要循环dom中一个元素的所有节点，一直找到它里面所有的文本节点。里面有些 js 的判断条件好久没写，都忘了（难受），特此记录一下。

2. 如图 ，手动创建了一个名称为 temn 的  dom节点，当然可以不用手动创建，如果页面有该元素的话可以直接获取，例如：  document.getElementById('tenm')

<div id="temn">
  <span>k哈哈哈哈哈s</span>
  <span>k哈哈哈哈哈s</span>
  <span>k哈哈哈哈哈s</span>
</div>

3. 写方法获取其中的节点，利用递归不管里面节点有多少层节点都可以获取到。

   var tenm=document.createElement('div')
      tenm.innerHTML=value
      tenm.id='tenm'
      console.log('tenm',tenm)

   function loopUntilTextNode(node) {
      for (let i = 0; i < node.childNodes.length; i++) {
        let childNode = node.childNodes[i];
        if (childNode.nodeType === Node.TEXT_NODE && childNode.textContent.trim() !== '') {
          console.log('childNode',childNode,childNode.parentNode)
          return childNode;  //childNode为他的文本内容  childNode.parentNode是他的父节点
        } else {
          let result = loopUntilTextNode(childNode);
          if (result) return result;
        }
    }
    return null;
}

4. loopUntilTextNode 接受一个 DOM 节点作为参数，并递归遍历它的所有子节点。如果某个子节点的 nodeType 属性为 Node.TEXT_NODE 并且它的文本内容不是空字符串，该函数就返回该节点。否则，继续递归遍历该节点的子节点。如果遍历完所有子节点都没有找到合适的文本节点，该函数返回 null。

5.好久没写 js 了，找了好多方法才想起来，。。。