节点列表内容答案

【问题标题】：Nodelist content节点列表内容
【发布时间】：2020-11-18 09:42:05
【问题描述】：

我有一个使用 querySelectorAll 获得的节点列表，我在这个节点列表上使用 forEach 来获取每个节点的 innerText 的值，然后如果单词多于 20 个，我会截断 innerText，然后我想将新的 innerText 分配回去在每个元素的 DOM 上，我需要一些帮助

function truncate(el, wordCount) {  
  return el.split(" ").splice(0, wordCount).join(" ");
}

let test = document.querySelectorAll(".test p");

test.forEach(function (item) {
    item = item.innerText;
    var text = truncate(item, 20);
    return item.innerText = text;
  });

<div class="test">
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
</div>

【问题讨论】：

标签： javascript nodelist innertext

【解决方案1】：

您需要使用的是slice，而不是splice。
您正在覆盖变量item，该变量包含 DOM 元素（您正在用它的文本内容覆盖它，一个字符串），所以在 forEach 的末尾您将文本分配回一个字符串并且不是 DOM 元素。要么使用不同的变量名，要么根本不使用，因为 truncate 可以像 truncate(item.innerText, 20) 一样简单地调用。
不需要forEach 中的return 语句。

类似这样的：

function truncate(text, wordCount) {  
  return text.split(" ").slice(0, wordCount).join(" ");
}

let test = document.querySelectorAll(".test p");

test.forEach(function(item) {
  let text = truncate(item.innerText, 20);
  item.innerText = text;
});

/*

the forEach above can be shortened even more, like so:

test.forEach(item => item.innerText = truncate(item.innerText, 20));

*/

<div class="test">
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
  <p>Cras et lobortis eros. Etiam vitae eleifend est. Integer ultricies diam et magna maximus sagittis. Aenean vitae elit quis justo egestas laoreet. Nunc orci tortor.</p>
</div>

【讨论】：