トップページ >  jQuery >  DOM要素の属性変更
初版2011/10/04: 最終更新日2011/10/04
DOM要素の属性変更
目次
DOM要素の属性変更とは
属性の扱い方
INPUT-Value
テキストノード
DOM要素の属性変更

HTMLの多くは、属性を変更することにより、様々に表示や処理を変化させる事ができます。
例えば、style属性やclass属性を変更することで、見た目を変化させることができます。
テキストノードを変更すれば、表示内容を変更することができます。
disabled属性やHTML5のcontenteditable属性などを変更すれば、その要素の取り扱いを変更することができます。

しかし、JavascriptのDOMは、各要素の属性を変更するためには必須なのですが、意外と取り扱いが面倒な部分があります。
特に、共通する属性をまとめて変更したい場合でも、ループを作ったり、要素オブジェクトの抽出をしなければなりません。
そこで、jQueryを用いると面倒な属性変更を簡単に扱うことができます。

jQueryの属性変更は基本的には、下述の「属性の扱い方」で示す「attr」メソッドで扱うことができます。
その中でも、jQueryでは CSSとイベントを特別視し、別のメソッドで取り扱えるように工夫されています。
【参考】

style属性やCSSなどの取り扱い
スタイルの変更
イベントなどの取り扱い
DOMイベントへの対応
属性の扱い方

DOM要素の属性変更には、「attr」メソッドという基本メソッドが存在します。
このメソッドを用いることで、目的の要素の特定属性の内容を調べたり、一括変更することができます。

attr(name)
最初の要素の nameで指定した特定のDOM属性の内容を取得します。
要素が指定属性を持っていない場合、undefinedを返します。
返り値:要素のDOM属性値
※属性を持たない場合は、「undefined」

リスト1. attr(name)

function Sample21(){
	var clss = jQuery( '.Sample21' ).attr( 'class' );
	clss = jQuery.trim( clss );
	var res = ( new String( clss )).replace( /[\s\t\r\n]+/g, '\n' );
	alert(res);
}

実装例

  • 1
  • 2
  • 3
上記 リスト1.では、「Sample21」クラスで抽出下要素が持つクラス名を列記しています。
(但し、最初の要素のclass属性のみ)
 
attr(name,value)
選択された要素の nameで指定した特定のDOM属性の内容を value で変更します。
value に 値の代わりに、コールバック関数を指定することもできます。
返り値:jQueryオブジェクト

リスト2. attr(name,value)

function Sample22(inpVal){
	// attrメソッドで、値「null」をchecked属性に設定。
	jQuery( '.Sample22 input' ).attr('checked',null);
	if( inpVal > 0 ){
		// attrメソッドで、checked属性にコールバック関数を適用。
		jQuery( '.Sample22 input' ).attr('checked',function(){
			var val = jQuery(this).attr('value');
			return (( val % 2) > 0);
		});
	}
}

実装例

  • 1
  • 2
  • 3
 
attr(properties)
選択された要素のDOMプロパティを一括変更します。
properties は、ハッシュオブジェクトです。
なお、properties の内容は、要素の「属性名:属性値」ではなく、「DOMプロパティ名:値」となります。
※class属性を変更する場合は、「class:値」ではなく、「className:値」で指定します。
返り値:jQueryオブジェクト

リスト3. attr(properties)

function Sample23(reset){
	// 初期化
	var now = new Date();
	var dstr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
	jQuery( '.Sample23' ).attr({
		disabled : true,
		value : dstr,
		style : 'background:silver;'
	});
	if( reset ){
		jQuery( '.Sample23' ).attr({
			disabled : false,
			style : 'background:normal;'
		});
		window.clearInterval(myTM);
	}
}

実装例

現在時刻:

「リスト3の実行」でタイマーをスタートさせ、「リスト3の中止」で停止させます。
その際、「disabled」「value」「style」属性を一括して変更します。
 
removeAttr(name)
選択された要素の nameで指定した特定のDOM属性を削除します。
返り値:jQueryオブジェクト

リスト4. removeAttr(name)

function Sample24(){
	jQuery( 'option.Sample24' ).removeAttr('selected');
}

実装例

INPUT-Value

input要素のvalue属性の変更は、属性値の中でも特に使用されます。
そのため、value属性専用のメソッドが用意されています。

val()
要素の value 属性値を文字列の配列として返します。
返り値:value属性値(文字列)の配列

リスト5. val()

function Sample35(){
	var arr = jQuery( '#Sample35' ).val();
	arr = jQuery.isArray(arr) ? arr.join('\n') : arr;
	alert(arr);
}

実装例

 
val(Value)
要素の value 属性値をすべて指定の値 Value とします。
返り値:jQueryオブジェクト

リスト6. val(Value)

function Sample36(){
	var now = new Date();
	var dstr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
	jQuery( '.Sample36' ).val(dstr);
}

実装例

テキストノード

大概の要素は、その要素が含むテキストノードやその中のHTML構文を表示しています。
WEBアプリケーションの多くは、そのテキストノードや内包するHTML構文を変化させます。
以下は、特定の要素を表示域とした場合、そのテキストノードや内包するHTML構文を変更する方法です。

text()
要素のテキストノードを文字列を連結して返します。
返り値:テキストノード(文字列)

リスト7. text()

function Sample47(){
	alert(jQuery( '.Sample47' ).text());
}

実装例

「リスト7の実行」ボタンは、「Sample47」 クラス内のテキストを抽出します。

たとえ、分かれていても一つのテキストとして抽出します。

 
text(Value)
要素のテキストノードをすべて指定の値 Value とします。
返り値:jQueryオブジェクト

リスト8. text(Value)

function Sample48(){
	var now = new Date();
	var dstr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
	jQuery( '.Sample48' ).text(dstr);
}

実装例

  1. 項目-1
  2. 項目-2
  3. 項目-3
 
html()
最初の要素をHTMLコードで返します。
innerHTMLと同様です。
返り値:HTMLコード(文字列)

リスト9. html()

function Sample49(){
	alert(jQuery( '.Sample49' ).html());
}

実装例

「リスト7の実行」ボタンは、「Sample49」 クラス内のHTMLコードを抽出します。

同じセレクタを複数設定している場合は、最初だけを取得します。

 
html(Value)
要素の子ノードをすべて指定の値 Value とします。
返り値:jQueryオブジェクト

リスト10. html(Value)

function Sample410(){
	var now = new Date();
	var dstr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
	hstr = '
  1. ' + dstr + '
  2. ' + dstr + '
  3. ' + dstr + '
'; jQuery( '.Sample410' ).html(hstr); }

実装例

  1. 項目-1
  2. 項目-2
  3. 項目-3