学ぶ JavaScriptにおけるDOMプロパティの探求 | インタラクティブなWeb開発のためのDOM操作

メニューを表示するにはスワイプしてください

JavaScriptは、コンテンツへアクセスおよび操作するための複数のプロパティを提供。これらのプロパティを理解することで、ユーザーの操作やその他の条件に応じてウェブページの内容を動的に更新可能。

InnerHTML

innerHTMLプロパティは、要素のHTMLコンテンツ（タグやテキストを含む）を取得または設定するためのもの。ページの内容を動的に更新する際によく使用されるプロパティの一つ。

index.html

index.js

innerHTML は、HTMLタグを含むすべてのコンテンツを取得し、HTMLタグ付きのコンテンツの挿入や更新を可能にするプロパティ。

textContent

textContent プロパティは、要素のテキストコンテンツを取得または設定し、HTMLタグをすべて除去する。HTML構造を考慮せずにプレーンテキストを扱いたい場合に最適。

index.html

index.js

textContent はテキストコンテンツのみを取得し、HTMLタグを無視してプレーンテキストを設定し、タグを自動的にエスケープします。

value

value プロパティは <input>、<textarea>、<select> などのフォーム要素で使用され、ユーザーが入力した値の取得や設定が可能です。

index.html

index.js

value は、フォーム要素の現在の値を取得し、input、textarea、またはselect要素に新しい値を設定するプロパティ。

InnerHTMLとTextContentの違い

実践例：ユーザープロファイルの更新

ユーザープロファイルページに初期データが表示され、ユーザーがフォームを使ってプロフィール情報を更新できる場面。ユーザーがフォームを送信すると、ページ上の内容が動的に更新される。

index.html

index.css

index.js

最初、プロフィールにはあらかじめ設定されたユーザー名と自己紹介が表示されており、入力フィールドで変更できます。「変更を保存」ボタンをクリックすると、JavaScriptが表示中のプロフィールを更新します。textContentはユーザー名をプレーンテキストとして更新し、innerHTMLは自己紹介をHTML形式で更新するため、ユーザーによる編集内容が反映されます。