Wrap Wörter in allen gleichen Selektoren mit Dom Objec mit

Question

ich einen Code aus webhelp.pl Forum: Fiddle, die wickeln jedes Wort in ersten Selektor:

document.querySelector('p')

aber wenn ich möchte

document.querySelectorAll('p')

dann Code keine Arbeit: das gleiche für Ruhe 'p' Selektoren durch hinzuzufügen. Könnte mir jemand helfen?

Answer 1

querySelector() gibt ein einzelnes Element zurück, das untergeordnete Knoten enthalten kann.

querySelectorAll() gibt eine Liste von Elementen zurück, von denen jedes untergeordnete Knoten enthalten kann. Aber die Liste selbst hat keine childNodes Eigenschaft.

Sie müssen sich durch die querySelectorAll() Liste iterieren auf jeder seiner Element des Kindes Knoten wiederum zu betreiben:

Array.prototype.slice.call(document.querySelectorAll('.abcd')).forEach(function(p) { 
    Array.prototype.slice.call(p.childNodes).forEach(function (node) { 
    if (node.nodeType === Node.TEXT_NODE) { 
     var text = node.nodeValue; 

     var words = text.match(/(\S+|\s+)/g); 

     words.forEach(function (word) { 
     var isWhiteSpace = /^\s+/.test(word); 

     if (isWhiteSpace) { 
      node.parentNode.insertBefore(document.createTextNode(word), node); 
     } else { 
      var span = document.createElement('span'); 
      span.textContent = word; 
      node.parentNode.insertBefore(span, node); 
     } 
     }); 

     node.parentNode.removeChild(node); 
    } 
    }); 
}); 

Fiddle