javascript - 获取迭代列表的所有值

Question

如何将数组/列表的所有值放在一行中？

html示例代码:

<div class="projects">
   <span clas="project_title"> project1 </span>
   <span clas="project_title"> project2 </span>
</div>

如果我想获取 span 的值，我必须使用它

document.querySelectorAll('div.projects span.project_title')[0].textContent

---

结果:

project1

---

document.querySelectorAll('div.projects span.project_title')[1].textContent

---

结果:

project2

---

是否有任何简单的 JS 查询来获取此结果而无需迭代到列表中？

示例结果:

project1, project2

---

Answer 1

没有迭代就无法获得所有这些。但这种迭代可以在幕后完成。您可以使用 Array#map 获取 textContents。在这种情况下，您需要遍历 HTMLElements，这是在 Array#map 的幕后完成的.

const spans = document.querySelectorAll('div.projects span.project_title');
const texts = Array.prototype.map.call(spans, item => item.textContent);

console.log(texts);

<div class="projects">
   <span class="project_title"> project1 </span>
   <span class="project_title"> project2 </span>
</div>