Javascript 获取迭代列表的所有值

Javascript 获取迭代列表的所有值,javascript,html,Javascript,Html,如何将一个数组/列表的所有值放在一行中 html的示例代码: <div class="projects"> <span clas="project_title"> project1 </span> <span clas="project_title"> project2 </span> </div> 结果: 项目1 结果: 项目2 是否存在任何简单的JS查询,以便在不需要迭代列表的情况下获取此结果 示例

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

html的示例代码:

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

结果:

项目1



结果:

项目2


是否存在任何简单的JS查询,以便在不需要迭代列表的情况下获取此结果

示例结果:

项目1,项目2



没有迭代就不可能得到所有的结果。但这种迭代可以在幕后完成。您可以使用获取
文本内容。在这种情况下,您需要迭代
HTMLElements
,这是在的引擎盖下完成的

const span=document.querySelectorAll('div.projects span.project_title');
consttext=Array.prototype.map.call(span,item=>item.textContent);
控制台日志(文本)

项目1
项目2
您可以使用方法。并使用用于创建数组的
class
Array\map
更改span class属性词。然后
使用
连接(',')
数组
var a=Array.prototype.slice.call(document.querySelectorAll('div.projects span.project\u title')).map(a=>a.textContent);
console.log(a.join(','))

项目1
项目2

No,必须以某种方式对列表进行迭代,以获取项目的内容。要补充@Teemu所说的内容:没有任何东西可以阻止您创建一个小函数来迭代列表并以您想要的方式输出它。这被视为您在使用新的ESnext功能,你不能用
数组。从
而不是
数组。原型。映射。调用
?@Keith为什么这样做,为什么我需要创建一个额外的数组?我正在使用
这个
的特性与
映射
。很好,。。我的想法是Array.from只是让人们更容易理解,而Array create的性能也不是很好。@Keith通常你是对的,一个数组的创建并不是一件大事。我喜欢与上下文一起工作。如果您熟悉上下文,那么您将了解
应用
调用
等。
document.querySelectorAll('div.projects span.project_title')[0].textContent
document.querySelectorAll('div.projects span.project_title')[1].textContent