javascript - 使用 Dom 对象将单词包装在所有相同的选择器中

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