JavaScript DOM「概要」

JavaScript

DOM(Document Object Model)とは

DOMとは、ウェブページの構造を表現するための階層的なツリー構造です。
ウェブブラウザはHTMLドキュメントを読み込む際に、その構造を解析してDOMツリーを構築します。
このDOMツリーは、HTML要素(タグ)やテキストノード、コメントなどのオブジェクトを含んでおり、JavaScriptを使用してこれらのオブジェクトを操作できます。

※HTMLタグをElement(エレメント)と言います

DOMの主な特徴

ツリー構造

DOMは階層的なツリー構造であり、HTML要素が親子関係で結ばれています。例えば、<body>要素はその中に含まれる子要素(<div><p>など)を持っています。

要素へのアクセス

JavaScriptを使用してDOM要素にアクセスできます。
例えば、document.getElementById('myElement')を呼び出すことで、id属性がmyElementである要素にアクセスできます。

プロパティとメソッド

DOM要素はプロパティとメソッドを持っています。
プロパティは要素の属性を取得または設定するために使用されます。
(例:textContentinnerHTML
メソッドは要素に対して操作を実行します。
(例:appendChild()removeChild()

イベントハンドリング

DOMを使用して、ユーザーのアクション(クリック、入力など)に対するイベントハンドラを設定できます。
例えば、ボタンがクリックされたときに特定の処理を実行することができます。

DOMを理解する必要性

動的なウェブページ

DOMを理解することで、JavaScriptを使用してウェブページの要素を動的に変更できます。
例えば、フォームの入力値を取得したり、新しい要素を追加したりできます。

ユーザーインタラクション

DOMを使用して、ユーザーとのインタラクションを実現できます。
ボタンクリックやフォーム入力などのアクションに応じて、ウェブページの表示を変更できます。

コメント