DOM TreeWalker返回所有文本节点

我试图访问给定元素中的所有文本节点，以便我可以隔离单词并将它们包装在span中。

TreeWalker似乎是这项工作的API，但我发现它非常不直观。在我看来，规范和MDN参考(通常很擅长解释神秘的DOM api)都是不证自明的。

我的第一个假设是，所有我需要传递的是正确的过滤器作为第二个参数-像document.createTreeWalker( element, NodeFilter.TEXT_NODE )。但这似乎在遇到非文本节点时就会停止:

wordWrap( document.body )
function wordWrap( element ){
  var nodes = document.createTreeWalker( element, NodeFilter.TEXT_NODE )
  var node
  var text
  var word
  while( node = nodes.nextNode() ){
    text = node.nodeValue.replace( /(^'s+|'s+$)/, '' ).split( /'s+/g )
    while( text.length ){
      word = document.createElement( 'span' )
      word.className = 'word'
      word.innerText = text.shift()
      node.parentNode.insertBefore( word, node )
      if( text.length )
        node.parentNode.insertBefore( document.createTextNode( ' ' ), node )
        }
    node.parentNode.removeChild( node )
  }
}

.word {
  background: #fee;
  padding: 0 .5em 0 0;
}

Contact us at <a href="mailto:email@example.com">email@example.com</a> for submissions &#38; other enquiries.

所以我认为这是一个使用TreeWalker的第三个过滤器参数的机会，以及NodeFilter上的额外属性。如果一个过滤器方法的有效返回值是FILTER_ACCEPT, FILTER_REJECT &FILTER_SKIP，那么我推断，通过在第二个参数中接受元素节点和文本节点，我可以指定应该接受文本节点，而跳过其他节点。但这似乎给出了相同的结果-锚内或锚后没有文本节点:

wordWrap( document.body )
function wordWrap( element ){
  var nodes = document.createTreeWalker(
    element,
    NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
    { acceptNode : function( node ){
      if( node.nodeType === node.TEXT_NODE )
        return NodeFilter.FILTER_ACCEPT
      else 
        return NodeFilter.FILTER_SKIP
    } } 
  )
  var node
  var text
  var word
  while( node = nodes.nextNode() ){
    text = node.nodeValue.replace( /(^'s+|'s+$)/, '' ).split( /'s+/g )
    while( text.length ){
      word = document.createElement( 'span' )
      word.className = 'word'
      word.innerText = text.shift()
      node.parentNode.insertBefore( word, node )
      if( text.length )
        node.parentNode.insertBefore( document.createTextNode( ' ' ), node )
        }
    node.parentNode.removeChild( node )
  }
}

.word {
  background: #fee;
  padding: 0 .5em 0 0;
}

Contact us at <a href="mailto:email@example.com">email@example.com</a> for submissions &#38; other enquiries.

至此，我确信使用DOM1方法递归地遍历树会更容易，如以下代码片段所示:

wordWrap( document.body )
function wordWrap( element ){
  textNodes( element ).forEach( function( node ){
    var text = node.nodeValue.split( /'s+/g )
    var word
    while( text.length ){
      word = document.createElement( 'span' )
      word.className = 'word'
      word.innerText = text.shift()
      node.parentNode.insertBefore( word, node )
      if( text.length )
        node.parentNode.insertBefore( document.createTextNode( ' ' ), node )
        }
    node.parentNode.removeChild( node )
  } )
}
function textNodes( element ){
  var nodes = []
  Array.prototype.forEach.call( element.childNodes, function( child ){
    if( child.nodeType === child.TEXT_NODE )
      nodes = nodes.concat( child )
      else if( child.nodeType === child.ELEMENT_NODE )
        nodes = nodes.concat( textNodes( child ) )
        } )
  return nodes
}

.word {
  background: #fee;
  padding: 0 .5em 0 0;
}

Contact us at <a href="mailto:email@example.com">email@example.com</a> for submissions &#38; other enquiries.

我错过了什么?