Question

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

document.querySelector('p')

但是当我想为休息添加相同的内容时，请注意＆＃39; p＆＃39;选择器：

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

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

1 个答案: