Zenn
🤖

[REACT頻出のJS②]DOMとイベントリスナについて

2023/04/02に公開
JavaScript
React Native
React
JavaScript
DOM
tech

以前、DOMについての記事を書きました。

https://zenn.dev/airiswim/articles/771a7863e7ce6b

簡単にここで書くと、
HTMLをJavaScript内で操作するためのオブジェクトをDOM　と覚えておこう！
【DOM参考：】

ではこのDOMをどのように扱うのか。今日はそこをまとめていきたいと思います。

JavaScriptでDOMを取得する方法

JavaScriptでDOMを取得する方法には、以下のような方法があります。

  1. document.getElementById()
  2. document.querySelector()
  3. document.querySelectorAll()
  4. document.getElementsByTagName()
  5. document.getElementsByClassName()

1. document.getElementById()メソッドを使用する方法

  • HTMLドキュメント内の要素の中から、指定されたID属性を持つ要素を取得するために使用される。
    id属性は文書内で一意でなければいけない。

【構文】

const element = document.getElementById('要素のID');

ex.

以下のようなHTMLがあるとして...

<!DOCTYPE html>
<html>
<head>
	<title>document.getElementById()の例</title>
</head>
<body>
	<h1 id="title">Hello World</h1>
	<p>これは、document.getElementById()の例です。</p>
</body>
</html>

上記のHTMLから id="title" を持つ要素を取得するには、このように使用できる。

const titleElement = document.getElementById('title');

2. document.querySelector()メソッドを使用する方法

  • 指定されたCSSセレクターに一致する最初の要素を返す、JavaScriptのメソッド。
    CSSセレクターを使用してドキュメント内の特定の要素を選択するのに便利!

【構文】

element = document.querySelector(selectors);
  • ここでのselectorは、検索したい要素を指定するCSSセレクター。
    セレクターが一致する最初の要素が返されます。一致するものが見つからない場合は null を返す。

ex.①

例えば、次のHTML要素があるとします。

<div id="myDiv">Hello World!</div>

この要素にアクセスするには、次のようにDocument.querySelector()を使用。

const myDiv = document.querySelector("#myDiv");

#myDivというセレクターを使用し、IDがmyDivである<div>要素を選択。
この要素はmyDivという名前の変数に割り当てられるようにした。

ex.②

以下のようなHTMLがあったとして...

<form>
  <label for="name-input">Name:</label>
  <input type="text" id="name-input" name="name">
  <button type="submit">Submit</button>
</form>

このフォームの送信ボタンを取得するには...

//js
const submitButton = document.querySelector('button[type="submit"]');

そしてここから、ボタンがクリックされたときにイベントリスナー処理を追加すると以下のように使用できる。

//js
const submitButton = document.querySelector('button[type="submit"]');
submitButton.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Button clicked!');
});

<参考>

3. document.querySelectorAll()メソッドを使用する方法

  • 指定されたCSSセレクターに一致するすべての要素を返す、JavaScriptのメソッド.

【構文】

elementList = parentNode.querySelectorAll(selectors);
  • ここでのselectorsは、検索したい要素を指定するCSSセレクターです。
    セレクターが一致するすべての要素がNodeListとして返される。

ex.

次のHTML要素があるとする。

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

このリストからすべての項目を取得するには、次のようにDocument.querySelectorAll()を使用する。

const items = document.querySelectorAll('li');
items.forEach(item => console.log(item.textContent));

<参考>

4. document.getElementsByTagName()メソッドを使用する方法

  • HTMLドキュメント内の要素の中から、指定されたタグ名を持つ一致するすべての要素を取得するために使用される。
    このメソッドは、getElementById()メソッドと同様に一般的に使用されるDOM要素取得メソッドの1つ。

【構文】

const elements = document.getElementsByTagName('タグ名');

ex.

以下のようなHTMLがあったとする..

<!DOCTYPE html>
<html>
<head>
	<title>document.getElementsByTagName()の例</title>
</head>
<body>
	<h1>タイトル1</h1>
	<p>これは、document.getElementsByTagName()の例です。</p>
	<h2>タイトル2</h2>
	<p>これは、document.getElementsByTagName()の例です。</p>
</body>
</html>

このHTMLから、 h1 要素を取得するには、以下のように使用することができる。

const h1Elements = document.getElementsByTagName('h1');

5. document.getElementsByClassName()メソッドを使用する方法

この方法は、指定されたクラス名に一致するすべての要素を取得する方法。

const elements = document.getElementsByClassName('example');

ex.
以下のようなHTMLがあったとして...

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>

クラス名が"box"である要素を取得するには、次のように使用するjことができる。

const boxes = document.getElementsByClassName("box");

上記のコードを実行すると、"boxes"という変数に"box"クラスを持つ全てのHTML要素が取得される。
この場合、変数"boxes"には3つの要素が含まれている。

取得した要素を操作する場合は、配列のようにインデックス番号で指定することができる！！
ex. 1つ目の要素のテキストを取得するには、以下のようにコードを書くことができます。

const firstBox = boxes[0];
const text = firstBox.innerText;
console.log(text); // "1"が表示される
復習：addEventListener()メソッド

JavaScriptにおけるイベントリスナー:

イベントが発生した際に実行される関数のことをイベントリスナーという。

イベント：ユーザーの操作やページの読み込みなど、ある特定の状況が発生したことを示すもの
リスナ：イベントが発生したときに実行される関数のこと
ex. ユーザーがボタンをクリックしたとき,ページが読み込まれたとき,など。
このようなイベントに対して、リスナーを設定することができる。

【基本構文】

target.addEventListener(type, listener[, options]);
//日本語にするなら
対象要素.addEventListener( 種類, 関数, false );

【ex. ボタン要素にclickイベントのリスナーを設定】

// ボタンの要素を取得
const button = document.querySelector('button');

// イベントリスナーを設定
button.addEventListener('click', function() {
  // ボタンがクリックされたときに実行される処理
});
  • 以下は同じようにarrow関数で設定する例
button.addEventListener('click', () => {
  // ボタンがクリックされたときに実行される処理
});

DOMを取得する方法の種類の使い分け基準

1. 取得する要素の数

要素が1つしかない場合は getElementById や querySelector を使用するのが適している。
複数の要素を取得する場合は getElementsByClassName や getElementsByTagName、querySelectorAll を使用するのが適している。

2. 取得する要素の種類

getElementById はID属性を持つ要素を取得するのに適しています。
querySelector や querySelectorAll はCSSセレクタを使用できるので、より柔軟な要素の選択ができます。
getElementsByTagName はタグ名を指定して要素を取得するのに適しています。

状況に合わせて使い分けが必要。

コード内で使用する方法を統一することで、可読性の向上や保守性の向上にもつながる。

Discussion