DOMのCRUD操作

Document Object Model (DOM) は、HTMLのためのツリー構造です。JavaScript はこれを使用して、ページ上のあらゆる要素、属性、テキスト部分にアクセスし、変更を行います。

ボタンをクリックしたときにページがリフレッシュされずに更新される場合、それは DOM 操作が行われている証拠です。

以下に、CRUD (Create, Read, Update, Delete) 操作の実行方法を示します。

  1. Read: 要素へのアクセス ページ上の要素を見つけるには、以下のメソッドを使用します：
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Create: 新しい要素の作成 JavaScript を使用して、新しい HTML 要素を生成できます。
  • createElement(): メモリ内に新しいタグを作成します。
  • append(): 親要素の末尾にコンテンツを追加します。
  • appendChild(): 単一のノードを最後の子供として追加します。
  • prepend(): 親要素の先頭にコンテンツを追加します。
  • before(): 特定のターゲットの前に要素を挿入します。
  • after(): 特定のターゲットの後に要素を挿入します。
  • insertBefore(): 既存の子要素の前に新しい要素を配置します。
  1. Update: コンテンツの変更 ユーザーが画面上で見る内容を変更します：
  • innerText: 表示されているテキストのみを更新します。
  • textContent: 非表示のテキストを含むすべてのテキストを更新します。
  • innerHTML: コンテンツを更新し、HTML タグの追加を可能にします。
  1. Attributes: プロパティの管理 属性はタグに付加情報を追加します。
  • setAttribute(): 属性に新しい値を設定します。既存の値は上書きされることに注意してください。
  • getAttribute(): 現在の値を取得します。
  • removeAttribute(): 属性を削除します。
  • hasAttribute(): 属性が存在するかどうかを確認します。

プロのヒント: 現在のクラスを削除せずにクラスを追加するには、classList.add() を使用してください。カスタム属性には setAttribute() を使用します。

  1. Delete: 要素の削除 ページから要素を削除するには、以下を使用します：
  • remove()

CRUD フローのまとめ：

  • Create: document.createElement("p")
  • Update: p.innerText = "Hello"
  • Read: document.getElementById("p")
  • Delete: p.remove()

これらのメソッドをマスターすることで、ToDo リスト、計算機、フォームバリデーターなどのインタラクティブなツールを構築できるようになります。これは、モダンな Web フレームワークを学ぶための重要なステップです。

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

オプションの学習コミュニティ: https://t.me/GyaanSetuAi