DOMのCRUD操作

Document Object Model (DOM) は、ブラウザがHTMLを表現する方法です。すべての要素、属性、テキストをオブジェクトに変換します。JavaScriptはこれらのオブジェクトを使用して、画面に表示される内容を変更します。

ボタンをクリックしてページをリフレッシュせずに内容が更新されるとき、JavaScriptはDOMを操作しています。

これらのメソッドを使用して、CRUD（Create: 作成、Read: 読み取り、Update: 更新、Delete: 削除）操作を行うことができます。

1. 要素へのアクセス (Read)

何かを変更するには、まずそれを見つける必要があります。以下のメソッドを使用します：

  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()

2. 要素の作成 (Create)

JavaScriptを使用して、新しいHTML要素を生成できます。

  • createElement("tagName") は、メモリ内に要素を作成します。
  • append() は、親要素の末尾にコンテンツを追加します。
  • appendChild() は、単一のノードを最後の子供として追加します。
  • prepend() は、親要素の先頭にコンテンツを追加します。
  • before() は、特定の項目の前に要素を挿入します。
  • after() は、特定の項目の後に要素を挿入します。
  • insertBefore() は、特定の子供の前に要素を配置します。

注：要素は、ページに追加されるまでメモリ内に保持されます。

3. 要素の更新 (Update)

以下のプロパティを使用して、既存のコンテンツを変更できます：

  • innerText: 表示されているテキストのみを変更します。
  • textContent: 非表示のテキストを含むすべてのテキストを変更します。
  • innerHTML: コンテンツを変更し、HTMLタグを追加することを可能にします。

4. 属性の操作 (Update)

属性は、要素に関する追加情報を提供します。

  • setAttribute(name, value): 属性を設定または置換します。
  • getAttribute(name): 属性の値を取得します。
  • removeAttribute(name): 属性を削除します。
  • hasAttribute(name): 属性が存在するかどうかを確認します。

プロのヒント：既存のクラスを削除せずにクラスを追加するには、classList.add() を使用してください。setAttribute() は値全体を置き換えてしまいます。

5. 要素の削除 (Delete)

ページから要素を削除するには、以下を使用します：

  • remove()

CRUDフローのまとめ：

  • Create: createElement()
  • Update: innerText = "New text"
  • Add: appendChild()
  • Delete: remove()

これらのメソッドをマスターすることで、ToDoリストや計算機のようなインタラクティブなアプリを構築できるようになります。これはフロントエンド開発において不可欠なスキルです。

出典: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka