querySelectorAll selects 只选择第一个元素

问题描述

我正在使用 Niels Reijnders 在此线程 Wrap each line of paragraph in a span 上编写的以下代码将段落的每一行换行。

function splitLines(container,opentag,closingtag) {
  var spans = container.children,top = 0,tmp = '';
  container.innerHTML = container.textContent.replace(/\S+/g,'<n>$&</n>');
  for (let i = 0; i < spans.length; i++) {
    var rect = spans[i].getBoundingClientRect().top;
    if (top < rect) tmp += closingtag + opentag;
    top = rect;
    tmp += spans[i].textContent + ' ';
  }
  container.innerHTML = tmp += closingtag;
}

splitLines(document.querySelectorAll('p')[0],'<span>','</span>')

它工作得很好并且完成了我需要的，但只选择了 DOM 的第一段，而不是其他的。似乎添加 forEach 方法可能会解决我正在寻找的问题，但我不知道如何在此代码中实现它。

任何帮助将不胜感激。

谢谢

解决方法

你会想要这样的：

document.querySelectorAll('p').forEach(p => splitLines(p,'<span>','</span>'))

javascript selectors-api