[JavaScript] で要素の属性を取得する

基本はgetAttribute() / setAttribute() メソッド

setAttribute() / getAttribute() メソッドは、DOM標準、非標準を問わずすべての属性にアクセスできるため、要素の属性をset/get する時は常にこのメソッドを使うようにする。

var foo_id = document.getElementById("foo").getAttribute("id");

document.getElementById("foo").setAttribute("id", “new_id”);

class を扱う時の注意

例えばclass名を取得したい場合は、getAttribute("class")　とすればよさそうだが、 IE7 ではgetAttribute("className") としないと、null が返されてしまう。(class属性はJavaScriptでアクセスするときの名前が変更されている属性のため)

ブラウザを問わず確実にclass名を取得するには、オブジェクトのclassNameプロパティに直接アクセスすればok。

//get
var foo_class = document.getElementById("foo").className;
//set
document.getElementById("foo").className = "newClass";

input要素の状態を表す属性

form のinput要素の状態を表す属性(disabled, checked など)についても、直接オブジェクトのプロパティにアクセスして設定,取得する。

var textbox = document.getElementById("textbox");
textbox.disabled = false;

jQueryの場合

jQuery では jQuery.attr() メソッドですべての属性にアクセスできる。

//get
var className = $("#foo").attr("class");
//set
$("#foo").attr("id", "newId");

class名をsetするときは、jQuery.addClass() メソッドを使う。

$("#foo").addClass("new_class" "other class");

まとめ

・要素の属性のget/setには、基本的に getAttribute() / setAttribute() メソッドを使う。

・例外的にclass名, formのinput要素の状態をget/setする際は、オブジェクトのプロパティに直接アクセスする。

・jQuery では、jQuery.attr() メソッドで要素の属性にアクセスする

参考文献：JavaScrip クックブック p251

JavaScriptクックブック