1. IE8 で a 要素の name 属性が生成されない
JavaScript で、HTML の「ページの特定の場所を示すアンカー要素」を生成した。
結果を Firefox で表示すると、アンカー要素が正常に生成された。しかし、Internet Explorer 8 では想定していた属性名が生成されなかった。
このとき、特定の場所を示すために a 要素の
を利用していた。
例えば、次のように JavaScript で a 要素を生成し、name 属性を設定した後、HTML の要素として挿入する。
<html>
<head></head>
<body>
</body>
<script type="text/javascript">
var anchor = document.createElement('a');
anchor.name = "hoge";
anchor.appendChild(document.createTextNode('hoge'));
document.body.appendChild(anchor);
</script>
</html>
Firefox において、Firebug で上記のHTML を確認すると、
<a name="hoge">hoge</a>
IE8 の DebugBar で確認すると
<a submitName="hoge">
name 属性ではなく、 submitName 属性になっている。これにより、アンカーが機能しない。
2. a 要素で name 属性を使うことは問題ない
name 属性を使うことは、問題があるのだろうか？
「文書の特定の場所へのリンク」 によると、
リンク先には、文書中の特定の段落など具体的な場所（フラグメントといいます）を指定することもできます。フラグメントを示すには、対象となる要素にid属性を使って名前を付けます（古いブラウザとの互換性のためには、アンカー要素の2番目の役割であるname属性による名前付け機能を使うこともできます）
では、なぜ name 属性が勝手に変ってしまったんだろう？
3. DOM の createElement メソッドで生成したオブジェクトに対する属性の指定
アンカー要素を生成するために、createElements メソッドを利用した。
DOM の createElements で生成したオブジェクトは、その属性を直接設定できる。
Document Object Model (Core) Level 1 によると、
createElement
Creates an element of the type specified. Note that the instance returned implements the Element interface, so attributes can be specified directly on the returned object.
例えば、img タグに対応したオブジェクトを生成し、その src 属性を設定してみる。
var img = document.createElement('img');
img.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkfqT1erWUZHM7qxkaPs5aIS-NDQx5dDTg4_VnLNKq8AP7b0iAJei3pGnwVMtnottNtucRtfl8YLKbb9vYjIoiD09LWvZYOrrqtAUcyrIIQJIo0vqy-KMJDL70gmC4Nf80e-snbvOqdZw/s220/profile.png";
document.body.appendChild(img);
上記のコードは、 Firefox, IE の両方で問題なく動作する。
先ほどの引用中に `the instance returned implements the Element interface’ とあった。よって、Interface Element の setAttribute メソッドを使い、属性を設定することもできる。
var img = document.createElement('img');
img.setAttribute("src", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkfqT1erWUZHM7qxkaPs5aIS-NDQx5dDTg4_VnLNKq8AP7b0iAJei3pGnwVMtnottNtucRtfl8YLKbb9vYjIoiD09LWvZYOrrqtAUcyrIIQJIo0vqy-KMJDL70gmC4Nf80e-snbvOqdZw/s220/profile.png");
document.body.appendChild(img);
setAttribute メソッドを使い、アンカー要素の name 属性を設定してみた。
anchor.setAttribute("name", "hoge");
しかし、これだけでは、結果は変わらなかった。 (+_+)
4. DOCTYPE スイッチで Standards モードでレタリングする
文書の先頭で DOCTYPE を、キチンと設定しないとダメだろうか？
IE8 では、DOCTYPE を指定しないと、互換モードでレタリングされる。
IE8のレンダリングモードと互換表示 - page2 - builder by ZDNet Japan によると、
レンダリングモードはIE6の時代から採用されてきたDOCTYPE宣言による指定か、IE8で採用されたMETAタグまたはHTTPレスポンスヘッダによる指定で切り替えることができる。…
IE8ではDOCTYPE宣言によってIE8 StandardsモードとQuirksモードが切り替わる。
問題のソースコードを IE8 で開き、DebugBar を起動。メニューの右隅を見ると `Quirks’ と表示された。
DOCTYPE 宣言による「解釈モード」の切り替え によると、
「 過去の慣習的な解釈を再現するモード (Quirks mode) 」
「 仕様準拠の厳格解釈モード (Standards mode) 」
では、Standards モードでは、アンカー要素を表示させることはできるだろうか？
モードを変更するには、IE8のレンダリングモードと互換表示 - page2 - builder by ZDNet Japan によると、
IE8 StandardsモードになるDOCTYPE宣言の記述
- HTML4.01 Transitional／FramesetのDOCTYPE宣言でシステム識別子（DTDのURL）を記述している場合
- HTML4.01 StrictのDOCTYPE宣言を記述している場合
- XHTML1.0のDOCTYPE宣言を記述している場合
問題のコードの先頭に DOCTYPE 宣言を書き Standard モードでレタリングするようにした。
属性を直接設定する方法でアンカー要素を生成したら、a 要素が以下のようになった。 (@_@;)
<a propdescname="hoge">
これに対して、属性を setAttribute メソッドを使った場合、問題なくアンカー要素が生成された。
上記をまとめると、
- DOCTYPE 宣言により Standard モードでレタリングし、
- setAttribute メソッドを使えば良い。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
</body>
<script type="text/javascript">
var anchor = document.createElement('a');
anchor.setAttribute("name", "hoge");
anchor.appendChild(document.createTextNode('hoge'));
document.body.appendChild(anchor);
</script>
</html>
上記の DOCTYPE は、IE6 でも標準準拠モードになる。
また、システム識別子がついていないだけで、動作ががらっと変ってしまう。
「システム識別子」とは、DOCTYPE 宣言による「解釈モード」の切り替え によると、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
…
"-//W3C//DTD HTML 4.01//EN" の部分は「 公開識別子 」と呼ばれます。…
"http://www.w3.org/TR/html4/strict.dtd" は、この W3C HTML 4.01 の文法を定義しているモノ (DTD) のありかです。「 システム識別子 」と呼ばれます。
5. クロスブラウザ対策
ところで、Setting the “name” attribute in Internet Explorer » Semicolon には、次のように MSDN における説明が引用されている。
I found an explanation in the MSDN DHTML reference, on the page describing the NAME Attribute.
“The NAME attribute cannot be set at run time on elements dynamically created with the createElement method. To create an element with a name attribute, include the attribute and value when using the createElement method.”
以下の記述により、Quirks モードとなり、 DOCTYPE を書かなくても良いようだ。
var anchor = document.createElement("<a name='hoge'>");
anchor.appendChild(document.createTextNode('hoge'));
document.body.appendChild(anchor);
しかし、残念ながら Firefox では動かない。 (+_+)
には、クロスブラウザ対策がされているコードが書かれている。
6. jQuery で DOM エレメントを生成する
jQuery を使うなら、DOCTYPE を宣言しなくてもちゃんと表示された。
利用したメソッドは次の二つ。
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("<a name='hoge'>hoge</a>").appendTo("body");
});
</script>
</head>
<body>
</body>
</html>
ただし、IE8 では、先ほどの DOCTYPE を記述したり、
$("<a>").append("hoge").attr("name", "hoge").appendTo("body");
または、以下のように記述すると、
$("<a name='hoge'>").append("hoge").appendTo("body");
正常に表示されない。Firefox では、問題ないのだけれど。
7. まとめ
- DOCTYPE 宣言して、setAttribute メソッド使う。
- jQuery なら $ メソッドにおいて、属性と中身を含んだ HTML をごっそり引数として渡す。
てゆうか、name 属性は使わない方がいいのかな？
例えば、ウェブページで右クリックすると、コンテキストメニューに表示したいブラウザが表示される。
![img08-10-2010[4]](http://lh5.ggpht.com/_2IbZQWoiKQ0/TGFn4Orfs_I/AAAAAAAAAq0/dP2dmGRlSB4/img08-10-2010%5B4%5D%5B5%5D.png?imgmax=800 "img08-10-2010[4]")
![img08-10-2010[6]](http://lh6.ggpht.com/_2IbZQWoiKQ0/TGFn46MtAHI/AAAAAAAAAq4/gEINb2nocpE/img08-10-2010%5B6%5D%5B4%5D.png?imgmax=800 "img08-10-2010[6]")
![img08-10-2010[11]](http://lh5.ggpht.com/_2IbZQWoiKQ0/TGFn5fcO7HI/AAAAAAAAAq8/MHZ4RbsCqws/img08-10-2010%5B11%5D%5B4%5D.png?imgmax=800 "img08-10-2010[11]")
![img08-10-2010[9]](http://lh4.ggpht.com/_2IbZQWoiKQ0/TGFn6AhaJII/AAAAAAAAArA/5Xc-0MmcU5w/img08-10-2010%5B9%5D%5B4%5D.png?imgmax=800 "img08-10-2010[9]")
![img08-10-2010[10]](http://lh5.ggpht.com/_2IbZQWoiKQ0/TGFn6yXka1I/AAAAAAAAArE/Q0c0XVz8jic/img08-10-2010%5B10%5D%5B4%5D.png?imgmax=800 "img08-10-2010[10]")
![img06-07-2010[3]](http://lh5.ggpht.com/_2IbZQWoiKQ0/TAxtW4Jt92I/AAAAAAAAAoc/PgxMslGlDhQ/img0607201037.png?imgmax=800 "img06-07-2010[3]")
![img06-07-2010[2]](http://lh4.ggpht.com/_2IbZQWoiKQ0/TAxtYHK7wyI/AAAAAAAAAog/khl3vm69gpA/img0607201024.png?imgmax=800 "img06-07-2010[2]")
