初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

Javascript DOM(Document Object Model) 1

今後jQueryを学ぶ際に、より深く理解ができるよう密接な関係を持つDOMについて数日記述いたします。
DOMがわかるとjQueryが理解しやすくなるのでこれからjQueryを学ぼうと思っている方はDOMも勉強することをお勧めいたします。

DOMとは

  • DOMとはDocument Object Medelの略で、HTML文書をオブジェクトとして読み込んで操作するための仕組みです。
  • Documentオブジェクトが持つ要素の構造そのもの、あるいはそれらにアクセスしたり操作したりする機能のこと
  • DOMは、ドキュメントをツリー構造で扱います

これだとわかりづらいですね。もう少し砕いてDOMを説明すると
<h1>や<p>や<img>などの要素にアクセスする仕組みです。

DOMを操作することで要素の値を、指定の要素を書き換えなくてもダイレクトに 操作することができます。
例えばp要素のテキストを変更したり、img要素のsrc属性の属性値を変更することで別の画像に差し替えたりすることができます。

やはり文章にするとまだわかりづらいので実際に 例題を記述してみましょう。

要素名で要素を取得する

HTML文書の要素をデータとして取得するには、documentオブジェクトにあらかじめ用意されている【getElementsByTagName()メソッドを使います。

document.getElementsByTagName('取得したい要素名')

 

《例題》

<h1>プログラム実行テスト</h1>
<p>第1段落</p>
<p>第2段落</p>
<p>第3段落</p>
<script>
var p_node = document.getElementsByTagName( 'p' );
document.write( p_node[0] );//配列
</script>

《実行結果》
f:id:bellsmarket:20150224121241p:plain

《プロパティ一覧》
プロパティ名内容
innerHTML 要素の内容(テキスト)
id id属性の値
title title属性の値
lang lang属性の値
dir dir属性の値
className class属性の値

 

要素の内容を取得する

要素の内容をデータとして取得するには、innerHTMLプロパティを使います

オブジェクト名 . innerHTML

 

《例題》

<body>
<h1>プログラム実行テスト</h1>
<p>第1段落</p>
<p>第2段落</p>
<p>第3段落</p>
<script>
var p_node = document.getElementsByTagName( 'p' );
alert(p_node[0].innerHTML);
</script>


《実行結果》

f:id:bellsmarket:20150224122649p:plain

要素の内容を変更する

innerHTMLプロパティで取得した要素の内容を変更する

オブジェクト名 . innerHTML = '文字列';

 

《例題》

<h1>プログラム実行テスト</h1>
<p>第1段落</p>
<p>第2段落</p>
<p>第3段落</p>
<script>
var p_node = document.getElementsByTagName( 'p' );

//p要素の内容を変更する
p_node[0].innerHTML = ' パラグラフ No.1';
</script>

《実行結果》

f:id:bellsmarket:20150224165336p:plain

【getElementsByTagName】メソッドで取得したタグ名は指定した要素全てのデータを取得しています。
データは配列として取得します。複数ある特定の要素を取り出したい場合でも、配列のインデックスを指定して取り出すことができます。 インデックスは上から順に要素に割り当てられます。今回の例題に合わせて図を載せときます。

f:id:bellsmarket:20150224174224p:plain

topへ戻る