Days on the Moon

DOM の getAttribute / setAttribute メソッドは DOM Level 1 から定義されているメソッドで、MSDN Library によれば IE はバージョン 4 からサポートしています。しかし、IE での element.getAttribute(name) / element.setAttribute(name, value) というのは、基本的には JavaScript における element[name] / element[name] = value のシンタックスシュガーでしかありません。ですから、element.setAttribute("innerHTML", "foo") とすると、element の属性には何の変化もないが element の内容が書き換えられるという事態になります。

この (手抜き) 実装が原因で、getAttribute / setAttribute で class 、style 、イベント属性などを操作できないというバグが IE にはあります。具体的には無理やり getAttribute / setAttribute メソッドを使おうとするなら以下のようにしなくてはいけません。

// NG
element.getAttribute("class");
element.setAttribute("style", "background-color: #fff; color: #000;");
element.setAttribute("onclick", "clickHandler(event);");

// OK
element.getAttribute("className");
element.style.cssText = "background-color: #fff; color: #000;";
element.setAttribute("onclick", new Function("clickHandler(event);"));

また、デフォルトで getAttribute は大文字小文字を区別せずプロパティ名を検索しますが、setAttribute は大文字小文字を区別します。この動作は IE 独自の引数 iFlags を設定することで変更可能です。(0: 大文字小文字を区別しない、1: 大文字小文字を区別する)

input.setAttribute("maxLength", 10);
input.setAttribute("maxlength", 20);
alert(input.getAttribute("MAXLENGTH")); // 10
input.setAttribute("maxlength", 30, 0);
alert(input.getAttribute("MaxLength")); // 30
alert(input.getAttribute("maxlength", 1)); // 20

ちなみに、このことを利用すればほぼ確実に IE かどうかを判別できると思われます。document.all を実装するブラウザはいくつもありますが、こんな奇妙な動作を実装するブラウザはほかにはないでしょう。(あったら教えてください。)

var isIE = (document.documentElement.getAttribute("style") ==
            document.documentElement.style);

ただし、手元に環境がないため、Mac IE 5 でも同じ動作をするのかは不明です。もしどなたか試してくださった際にはぜひ報告していただければ幸いです。

なお、これはあくまでも HTML (MSHTML) に関しての話であり、XML (MSXML) に関しては IE もちゃんと仕様どおりの動作をします。

参考

• getAttribute Method (MSDN Library)
• setAttribute Method (MSDN Library)