使用Dom Object在所有相同的选择器中包装单词

Question

我从webhelp.pl论坛获得了一个代码：Fiddle，它包装了第一个选择器中的任何单词：

document.querySelector('p')

但是当我想通过以下方式为休息'p'选择器添加相同的内容时：

document.querySelectorAll('p')

然后编码没有工作。有人能帮助我吗？

Answer 1

querySelector()返回单个元素，可能包含子节点。

querySelectorAll()返回一个元素列表 - 每个元素可能包含子节点。但是列表本身没有childNodes属性。

您需要遍历querySelectorAll（）列表以依次对其每个元素的子节点进行操作：

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