コンテンツに基づいてHTML要素内のテキストを選択する方法は？

Question

ウェブサイト内のリストや配列に含まれる商品の数を調べたいと思います。私が望むものは、の中のテキストであるCourseと呼ばれています。

私はそれらをすべて選択することができますが、どのように言葉だけをフィルタリングすることができますか？私はブラウザ内の開発ツールを使用しています。ここで

は、コードは次のとおりです。

私はfilterであなたのリストをフィルタリングvar e = document.querySelectorAll('.card-type');

`[<strong class=​"card-type">​Workshop​</strong>​, 
<strong class=​"card-type">​Course​</strong>​, 
<strong class=​"card-type">​Workshop​</strong>​, 
<strong class=​"card-type">​Course​</strong>​, 
<strong class=​"card-type">​Workshop​</strong>​, 
<strong class=​"card-type">​Workshop​</strong>​, 
<strong class=​"card-type">​Workshop​</strong>​, 
<strong class=​"card-type">​Workshop​</strong>​, 
<strong class=​"card-type">​Course​</strong>​, 
<strong class=​"card-type">​Workshop​</strong>​, 
<strong class=​"card-type">​Course​</strong>​, 
<strong class=​"card-type">​Course​</strong>​, 
<strong class=​"card-type">​Course​</strong>​, 
<strong class=​"card-type">​Course​</strong>​, 
<strong class=​"card-type">​Course​</strong>​, 
<strong class=​"card-type">​Course​</strong>​ ​]` 

Answer 1

クラスのセレクターを使用しています。

let courses = e.filter(item => item.textContent === "Course"); 

これは構文をES6ているラムダ別名letとfat arrow syntaxを使用しています。 ES5 JavaScriptが必要な場合は、単にvarと通常の匿名関数を使用してください。

var courses = e.filter(function(item) { 
    return item.textContent === "Course"; 
}); 

編集：Kevin Bは、私の機能が未定義であり、彼の権利があることを発見しました。これは、eがNodeListであり、配列ではないためです。我々はそれを変換する必要があります！ NodeListを配列に変換するには、複数の方法があります。一番簡単なのはspliceです。あるいは、あなたは気に入ってspreadの構文[...e].filterまたはArray.from()も使用できます。どちらもES6の機能です。

Answer 2

jqueryを使用すると、ほんの数行で、.text()と.each()を使って行うことができます。

$('.card-type').each(function(el, i) { 
    var text = $(el).text(); 
    if (text == "Course") { 
     console.log("found it"); 
    } 
}); 

は、基本的には、右のコンテンツのそれぞれを確認し、リストのすべての要素を反復処理し、それに何かを行います。

フィルタリングのような他のものを使用することもできますが、実際には要素で何をしようとしているかによって異なります。ここで

Answer 3

は私がステップ応答によるステップをやったことです：

1. は私がしたい要素を選択します。
   var e = document.querySelectorAll('.card-type');
   
2. は、Arrayにその変数を作成します。
   今 const f = Array.apply(null, e);
   
3. 新しい配列：
   0のフィルタ