繰り返しリストのすべての値を取る

Question

配列/リストのすべての値を1行にするにはどうすればよいですか？ HTMLの

例コード：

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

私はスパンの値を取るようにしたい場合は、私はこの

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を取得できます。この場合はArray#mapのフードで行われるHTMLElementsを反復処理する必要があります。

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>

Answer 2

あなたはclassとスパンクラス属性ワードを変更する.AND Array.prototype.slice.call方法で行うことができます。 Array#mapはありません、リスト項目の内容を取得するには、何らかの形で、反復する必要がある,

var a = Array.prototype.slice.call(document.querySelectorAll('div.projects span.project_title')).map(a => a.textContent); 
 

 
console.log(a.join(','))

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