diff --git a/src/pages/js/050-js-with-html.mdx b/src/pages/js/050-js-with-html.mdx
index 0a246ad..bf1610a 100644
--- a/src/pages/js/050-js-with-html.mdx
+++ b/src/pages/js/050-js-with-html.mdx
@@ -75,7 +75,7 @@
 
 ## 解説
 
-### documemnt.querySelector() とは
+### documemnt.querySelector()
 
 例として以下のHTMLを提示していました。  
 そこでは、`button`という変数を新たに作成し、`document.querySelector("button")`の結果を代入していました。
@@ -130,7 +130,7 @@
 </script>
 ```
 
-### addEventListener() とは
+### addEventListener()
 
 以下のソースコードは、ボタンをクリックしたときにメッセージを表示するという例でした。  
 このクリックしたときの動作を実現していたのが、`addEventListener`という機能です。
@@ -171,3 +171,37 @@
 こんなものがあるんだな程度でいくつか把握しておくと良いでしょう。
 
 [【javascript】addEventListenerイベントまとめ](https://qiita.com/whw3312/items/94a2bdf632ef77555579)
+
+## 応用
+
+### document.querySelectorAll()
+
+ボタンに限った話ではありませんが、HTMLの中に同じような要素が複数ある場合があります。
+
+`document.querySelector`は最初に見つかった1つの要素しか取得できませんでした。  
+それでは2番目、3番目の要素を取得したい場合はどうすれば良いでしょうか？
+
+その答えの1つに、`document.querySelectorAll`を使う方法があります。
+
+`document.querySelectorAll`は、指定したセレクターに一致する**すべての要素**を取得できます。  
+これを`for`文などと組み合わせることで、複数の要素に対して同じ処理を実行することができます。
+
+以下の例は複数の`<button>`タグに対して、その全てにクリックイベントを設定しています。
+
+```html file=src/sample/js/querySelectorAll.html
+src/sample/js/querySelectorAll.html
+内容を取得できませんでした
+```
+
+<RenderFile path="src/sample/js/querySelectorAll.html" />
+
+### 複数のイベントを登録する
+
+`addEventListener`は1つの要素に対して、複数のイベントを設定することもできます。
+
+```html file=src/sample/js/multiple-events.html
+src/sample/js/multiple-events.html
+内容を取得できませんでした
+```
+
+<RenderFile path="src/sample/js/multiple-events.html" />
diff --git a/src/sample/js/multiple-events.html b/src/sample/js/multiple-events.html
new file mode 100644
index 0000000..8c632e0
--- /dev/null
+++ b/src/sample/js/multiple-events.html
@@ -0,0 +1,16 @@
+<button type="button">クリック！</button>
+<div id="output"></div>
+
+<script>
+  const button = document.querySelector("button");
+
+  button.addEventListener("click", function () {
+    alert("ボタンがクリックされました！");
+  });
+
+  button.addEventListener("click", function () {
+    const output = document.querySelector("#output");
+    output.innerHTML = "ボタンがクリックされました！";
+  });
+
+</script>
diff --git a/src/sample/js/querySelectorAll.html b/src/sample/js/querySelectorAll.html
new file mode 100644
index 0000000..ea8c2bd
--- /dev/null
+++ b/src/sample/js/querySelectorAll.html
@@ -0,0 +1,16 @@
+<button type="button">クリック！</button>
+<button type="button">クリック！</button>
+<button type="button">クリック！</button>
+<button type="button">クリック！</button>
+
+<script>
+  const buttons = document.querySelectorAll("button");
+
+  for (let index = 0; index < buttons.length; index++) {
+    const button = buttons[index];
+    button.addEventListener("click", function () {
+      const count = index + 1;
+      alert(count + "番目のボタンがクリックされました！");
+    });
+  }
+</script>