Articles
TypeScript入門
TypeScriptにおけるDOM操作

TypeScriptにおけるDOM操作

この記事ではTypeScriptにおけるDOM操作について説明します。

DOM要素の操作と、要素の追加や削除などDOMツリーの操作方法をコードを通して学べます。

YouTube Video

TypeScriptにおけるDOM操作

TypeScriptでのDOM操作は、JavaScriptと同様に行えますが、TypeScriptでは型チェックがあるため、より安全に操作できます。DOM（Document Object Model）は、HTMLやXML文書をプログラムで操作するためのオブジェクトモデルで、ブラウザ上で表示されているページにアクセスしたり、要素を追加・削除したり、スタイルを変更したりできます。

TypeScriptを使ってDOMを操作する基本的な手法について紹介します。

DOM要素の取得

document オブジェクトを使って、HTML要素を取得します。以下のメソッドがよく使われます。

  1. document.getElementById document.getElementByIdは、指定したID属性を持つ要素を取得します。
1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}
  • document.getElementByIdは、指定したIDを持つ要素を取得し、存在する場合にその内容へアクセスできます。
  1. document.querySelector document.querySelectorは、CSSセレクタに一致する最初の要素を取得します。
1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}
  • document.querySelectorは、指定したCSSセレクタに一致する最初の要素を取得し、存在する場合にその内容へアクセスできます。
  1. document.querySelectorAll document.querySelectorAllは、CSSセレクタに一致するすべての要素を取得します。
1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));
  • document.querySelectorAllは、指定したCSSセレクタに一致するすべての要素を取得し、反復処理で内容へアクセスできます。

要素の型アサーション

TypeScriptでは、要素の型を明示的にアサーションすることで、より特定のメソッドやプロパティを利用できるようになります。

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}
  • asはTypeScriptにおける型アサーション演算子で、コンパイラに「この値を特定の型として扱う」と明示的に指示するために使われます。
  • TypeScriptでは、型アサーションを使うことで取得した要素を特定の型として扱い、その型固有のプロパティやメソッドにアクセスできます。

DOMの操作

DOMの操作は、要素が持つプロパティを通じて行われます。これにより、テキストや属性の変更、スタイルの適用、表示内容の更新などを柔軟に制御できます。

  1. 要素のテキストを変更する

    要素の textContent や innerHTML を使って、その要素のテキストやHTMLを変更できます。

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}
  • 要素のtextContentやinnerHTMLを使うことで、その要素の表示テキストやHTML内容を変更できます。

  1. 要素のスタイルを変更する

    要素の style プロパティを使って、インラインスタイルを変更できます。

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}
  • このコードは、特定の要素を取得して文字色を青にし、フォントサイズを20pxに変更しています。

  1. 要素の属性を変更する

    要素の属性を変更したい場合は、setAttribute を使います。

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}
  • このコードは、ページ内の最初のリンク要素の href 属性を https://example.com に変更しています。

  1. 要素のクラスを操作する

    要素のクラスを追加・削除する場合は、classList を使用します。

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}
  • このコードは、特定の要素に active クラスを追加し、inactive クラスを削除しています。

DOM要素の追加・削除

要素を新たに追加したり、既存の要素を削除したりすることもできます。これにより、ユーザーの操作やアプリの状態に応じて、ページ構造を動的に変化させることが可能です。

  1. 新しい要素の作成と追加

    document.createElement を使って新しい要素を作成し、それをDOMに追加します。

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body
  • このコードは、新しい <div> 要素を作成してテキストを設定し、ページの <body> に追加しています。

  1. 要素の削除

    要素を削除するには、removeChild や remove メソッドを使います。

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}
  • このコードは、特定の子要素を親から削除する方法と、要素自身を直接削除する方法を示しています。

イベントの追加

TypeScriptでは、要素にイベントリスナーを追加することで、ユーザーの操作に応じて処理を実行できます。

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}
  • このコードは、ボタンがクリックされたときにコンソールにメッセージを表示するイベントリスナーを追加しています。
  • addEventListener を使うと、クリック、マウス移動、キーボード入力など、さまざまなイベントを監視して処理を実行できます。

TypeScriptでのDOM操作のポイント

TypeScriptでDOM操作を行うときは、要素の型定義や null チェックなどに注意すると、エラーを防ぎ堅牢なコードを記述できます。

  1. nullチェック

    DOM要素が存在しない可能性があるため、TypeScriptでは要素を操作する前にnullチェックを行うことが推奨されます。

  2. 型の明示的なアサーション

    特定の要素（例えば、HTMLInputElement）を操作する場合は、アサーション（as）を使って型を指定し、その要素固有のプロパティ（value など）を利用するのが一般的です。

これらを踏まえると、TypeScriptを使ったDOM操作は、JavaScriptの自由さとTypeScriptの型安全性を活かして、より安全で予測可能なコードを書くことができます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

TypeScriptにおけるwindowオブジェクトTypeScriptにおけるDOM操作/イベント処理に用いられるクラス