2014-11-09

2014-11-09

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

JavaScript

 

 

要素へのアクセス（要素の取得）

  • Documentオブジェクトのメソッドでよく利用されるのは、「getElementById」と「getElementsByName」です
  • どちらも戻り値としてHTML要素を返します

IDを指定して要素を取得
  • 読み込まれたHTML文書の中から、要素のid属性の値で要素を検索して、データを取得する
  • id属性の値が同じ要素は存在しないので、あてはまる要素は１つなのでElement（単数形）

 

 

document.getElementById（ 'id属性値' ）;

 

 


《getElementByIdの利用》

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

《実行結果》

f:id:web-0818:20140923114920j:image

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

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

  • 読み込まれたHTML文書の中から、要素のclass属性の値で要素を検索して、データを取得する

要素をclass属性の値で検索するには？

 

 

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

 

 


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

《実行結果》

f:id:web-0818:20140923120204j:image


その他のHTML属性

《属性値の変更》

 

 

要素 . 属性名 = 値 ;

 

 


ただし、class属性だけは例外です。

classは予約語候補なので、そのままの名称では使えません。

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

 

表示エリアの切り替え

 

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

《CSSクラスの変更》

 

 

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

 

 


<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>表示エリアの切り替え</title>
<linkrel="stylesheet"type="text/css"href="style.css">
<script>
function showIppan(){
document.getElementById('ippan_area').className = 'active';
document.getElementById('hojin_area').className = 'passive';
}
function showHojin(){
document.getElementById('ippan_area').className = 'passive';
document.getElementById('hojin_area').className = 'active';
}
</script>
</head>
<body>
<inputtype="radio"name="target"value="i"onChange="showIppan();"checked>一般用
<inputtype="radio"name="target"value="h"onChange="showHojin();">法人用
<ulid="ippan_area"class="active">
  <li>氏名<inputtype="text"name="name"></li>
  <li>住所<inputtype="text"name="address"></li>
  <li>電話番号<inputtype="text"name="tel"></li>
</ul>
<ulid="hojin_area"class="passive">
  <li>会社名<inputtype="text"name="company"></li>
  <li>部署名<inputtype="text"name="busho"></li>
  <li>担当者名<inputtype="text"name="tanto"></li>
  <li>住所<inputtype="text"name="address"></li>
  <li>電話番号<inputtype="text"name="tel"></li>
  <li>内線番号<inputtype="text"name="naisen"></li>
</ul>
</body>
</html>

《style.css》

.active {
  display: block;
}
.passive {
  display: none;
}

《実行結果》

 

f:id:web-javascript:20130525221049j:image

 


 

f:id:web-javascript:20130525221208j:image

 

  • JavaScriptでどちらか一方だけが表示するよう制御しています
  • 初期値は、一般用入力エリアのclass属性は要素を表示する「activeクラス」、法人用入力エリアのclass属性には要素を非表示にする「passiveクラス」を設定しています
  • この２つのクラスを、ラジオボタンの選択状態が変更されたタイミングで交互に切り替えるよう設定しています

要素内容の操作

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

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

 

 

要素 . innerHTML = 文字列 ;

 

 


 

画像タグの生成

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="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>
<buttonid="btn"onclick="showImage();">読込</button>
<divid="imageArea">ここに画像が読み込まれます。</div>
</body>
</html>


《実行結果》

 

f:id:web-javascript:20130525224150j:image

 


 

f:id:web-javascript:20130525224501j:image

 


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

 

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

 


 

 

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