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

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オブジェクトのメソッドでよく利用されるのは、「getElementById」と「getElementsByName」です
  • どちらも戻り値としてHTML要素を返します
IDを指定して要素を取得
  • 読み込まれたHTML文書の中から、要素のid属性の値で要素を検索して、データを取得する
  • id属性の値が同じ要素は存在しないので、あてはまる要素は1つなのでElement(単数形)



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


《getElementByIdの利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>プログラム実行テスト</title>
</head>
<body>
<h1>プログラム実行テスト</h1>
<p id="top">第1段落</p>
<p class="contents">第2段落</p>
<p id="botton">第3段落</p>
<script>
  var i = document.getElementById( 'botton' );
  alert(i.innerHTML);
</script>
</body>
</html>


《実行結果》

  • p要素のid名buttonの値が、変数 i に代入されて表示されます

class属性の値にマッチする要素を取得する

  • 読み込まれたHTML文書の中から、要素のclass属性の値で要素を検索して、データを取得する
要素をclass属性の値で検索するには?
  • getElementByClassName()メソッドを使います


 document.getElementByClassName( 'class属性の値' )

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>プログラム実行テスト</title>
</head>
<body>
<h1>プログラム実行テスト</h1>
<p id="top">第1段落</p>
<p class="contents">第2段落</p>
<p id="botton">第3段落</p>
<script>
  var c = document.getElementsByClassName( 'contents' );
  alert(c[0].innerHTML);
</script>
</body>
</html>


《実行結果》

その他のHTML属性

《属性値の変更》


要素 . 属性名 = 値 ;


ただし、class属性だけは例外です。
classは予約語候補なので、そのままの名称では使えません。

  • classNameといプロパティを使います


表示エリアの切り替え

  • CSSクラスを切り替えることで、ページレイアウトを大幅に変更することが可能です


CSSクラスの変更》


要素 . className = 'CSSクラス名' ;

要素内容の操作

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


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


要素 . innerHTML = 文字列 ;


画像タグの生成

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像タグの生成</title>
<script>
  function showImage() {
    var htmlstr = '';
    for(var i=1; i<=3; i++) {
      htmlstr += '<img src="img/sweets' + i + '.jpg">';
    }
    document.getElementById( 'imageArea' ).innerHTML = htmlstr;
  }
</script>
</head>
<body>
<button id="btn" onclick="showImage();">読込</button>
<div id="imageArea">ここに画像が読み込まれます。</div>
</body>
</html>

《実行結果》


DOMで使えるその他のメソッド

メソッドの書き方と引数 機能
document.querySelector('セレクタ') セレクタ(CSS)にマッチする要素を1つ取得する
document.querySelectorAll('セレクタ') セレクタにマッチする要素をすべて取得する
要素.getAttribute('属性') 要素の属性値を取得する
要素.setAttribute('属性') 属性値を属性値1に変更する
document.createElement('要素') 新しい要素を作る
要素1.appendChild('要素2') 要素2を要素1の子要素として追加する


  • DOMによって、要素の属性や内容を変更することができる