求職者支援訓練Webサイト制作科 4月18日開講クラス 漂泊

初心者がプロになるための勉強 フェリカテクニカルアカデミーWebサイト制作科 4月18日開講クラス授業補足ブログ

DOM とは

ダイナミックHTML

  • JavaScript のようなクライアント側のプログラムを使って HTML の内容を動的に変化させる概念を、「ダイナミックHTML」 といいます
  • JavaScript」 から HTML の内容を制御する事ができるので、HTML が動的に変化するインタラクティブなコンテンツを作成する事ができます
  • 登場初期の頃はブラウザごとに制御方法が違っていたので、ブラウザごとに専用の JavaScript のコードを用意する必要がありました
  • そこで制御方法を統一するために DOM という仕様が生まれました


https://cdn-ak.f.st-hatena.com/images/fotolife/c/css_design/20111113/20111113154451.jpg


Document Object Model(DOM)

  • プログラムから「HTML 文書」や「XML 文書」を利用するための、標準化された仕様です
  • HTML 文書は、「タグ」「属性」「値」「文書」などの部品で構成されています
  • HTML 文書がブラウザに読み込まれると、JavaScript 内でこれらの部品1つ1つが「DOM オブジェクト」として自動的に生成されます
  • 「DOM オブジェクト」から、メソッドやプロパティを利用することができます
  • 「DOM オブジェクト」であれば、共通して利用できる基本的な機能として、Node というインターフェースが定められています
  • Node インターフェースには、すべての「DOM オブジェクト」で利用できる、基本的な機能がまとまっています
  • 「ノードインターフェース」を使用すると、木構造の親子関係を構築することができます
ノードのインターフェース

主に使用するインターフェースは、

  1. Document(ドキュメント、階層のルートに相当)
  2. Element(エレメント、要素に相当)
  3. Text(テキストノード、タグ以外の文字データに相当)
  4. Attr(アトリビュート、属性に相当)

の4つです

Documentインターフェース
  • Documentは、文書全体を管理するための機能がまとめられています
  • Documentは、DOMノード全体のルート(最上位)部分に相当します
  • Documentは、文書のルートに相当するエレメントを1つだけ保持しています


JavaScriptからDocumentオブジェクトを取得する

  • window.document プロパティを使用します
// HTMLDocument オブジェクトを取得する
var document_obj = window.document;

// 出力テスト
console.log(document_obj);
Elementインターフェース
  • エレメントは、HTML のタグ(要素)に相当します
  • 基本的なタグは、「HTMLElement」というインターフェースになります
  • タグの種類によっては、HTMLElement インターフェースから、更に派生します
  • 専用の機能や、メソッド、プロパティなどが追加されます
  • 例えば、「div」タグは「HTMLDivElement」となります
  • 例えば、「img」タグは「HTMLImageElement」となります
Textインターフェース
  • テキストノードは、タグ以外の文字データに相当します
  • 空白、タブ、改行などのインデント整形用の文字であっても、すべてテキストノードとなります
  • テキストノードは、子を持つ事はできません
Attrインターフェース


DOM オブジェクトを取得する

  • 取得したいタグに、id 属性を追加して、好きな識別名を設定します
  • 取得したいタグに、class 属性を追加して、好きな識別名を設定します
  • 取得したいタグに、name 属性を追加して、好きな識別名を設定します
ID 属性からエレメントを取得する
  • ID 属性から、1つのエレメントを取得する
  • document.getElementById( ) メソッドを使用します
  • 戻り値からは、マッチするエレメントが1つ得られます
  • 見つからなかった場合は、null が得られます


DOM操作のメソッド

HTMLドキュメントの階層構造
  • DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできます
  • この階層構造を「DOMツリー」と呼びます
  • DOMツリー内の個々の要素を「ノード」と呼びます
ノードを取得する getElementByIdメソッド
  • プログラムで目的のノードを取り出す
  • 引数には、HTMLにはタグで設定したid属性を指定します(HTMLタグにあらかじめid属性を指定しておく必要があります)
ノードにHTMLを設定する innerHTMLプロパティ
  • DOMの各ノードは、innerHTMLというプロパティが用意されています
  • 「innerHTML」は日本語にすると「内部」ですが、文字通りノードの内部のHTMLを表します
  • innerHTMLの値を変更することにより、ノードのHTMLを動的に変更できます

《例》

	var myArea = document.getElementById('myArea');
	myArea.innerHTML = '<h2>中見出し</h2>';


DocumentオブジェクトによるHTML要素の操作

要素へのアクセス(要素の取得)
  • Documentオブジェクトのメソッドでよく利用されるのは、「getElementById」と「getElementsByName」です
  • どちらも戻り値としてHTML要素を返します
IDを指定して要素を取得
  • id属性はHTML文書内で一意となる値が設定されるので「getElementById」メソッドで取得される要素は1つだけです

document.getElementById( 'id属性値' );

要素内容の操作

  • 要素が持つ内容を操作するための「innerHTML」プロパティ
  • 要素内のテキストのみ操作するための「textContent」プロパティ


《要素自体を書き換える》

要素 . innerHTML = 文字列 ;

たとえば、

document.getElementById( 'hoge' ).innerHTML

は、以下のHTML文書では、ID名hogeがついたp要素の範囲を示します。
p要素ごと書き換えることができます。

<div>
  <p id="hoge">
    文章
    <a href="xxx.html">リンク</a>
  </p>
</div>


《要素の中身を書き換える》

要素 . textContent = 文字列 ;

たとえば、

document.getElementById( 'hoge' ).textContent

は、以下のHTML文書では、ID名hogeがついたp要素内の文字列を示します。

<div>
  <p id="hoge">
    文章
    <a href="xxx.html">リンク</a>
  </p>
</div>

求職者支援訓練 フェリカテクニカルアカデミー