innerHTMLのバグ？

[新着] Webテンプレートを仮オープンしました

0   名前： minx ： 2007/01/25（木） 12:49  ID:u7OKXWvF sub-vK
id番号で識別される任意の要素範囲のHTMLテキストをJavaScriptで取得しようとしています。
innerHTMLがそれに適していると考え、トライしていますが予想外の結果が出ます。

下記のコードは、innerHTMLでmmx0102というidで括られる範囲のHTMLを取得しようとしているサンプルです。
（イベントハンドラで呼ばれている関数が用意されていなかったりするのは無視してください。）

test()関数で表示させてみると、本来は
「<A href="javascript:void(0);" id="mmc0102" onMouseover="showSubmenu(this.id)">」
となって欲しいところが
「<A id=mmc0102 onmouseover=showSubmenu(this.id) href="javascript:void(0);">」
となり、文字列の順番が違ってしまいます。
これはinnerHTMLのバグなのでしょうか？
あるいは、innerHTMLはこういった目的に使用すべきではないのでしょうか？

------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD>
<TITLE>MJ QM/SOP/WI</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META content="IBM WebSphere Studio Homepage Builder Version 10.0.1.0 for Windows" name="GENERATOR">
<META http-equiv="Content-Style-Type" content="text/css">

<STYLE type=text/css>
<!--

.mainmenu a {display:none;
visibility:"hidden"}

.submenu a {display:none;
visibility:"hidden"}

-->
</Style>

<script type="text/javascript">
<!--
var tmTop, tmHeight, tmLeft, wm, prev;
//--------------------------------------------------------------------------------------------------
function test(){
wholetext=m_m0102.innerHTML;
alert(wholetext);
}

//--------------------------------------------------------------------------------------------------

/ -->
</Script>

</HEAD>

<!-- ----------------------------------- -->
<BODY>

<div class="mainmenu" id="m_m0102" onclick="wm=1">
<A href="javascript:void(0);" id="mmc0102" onMouseover="showSubmenu(this.id)">メインメニュー2a</A>
<div class="submenu" id ="s_m0102">
<a href="link.htm">サブメニュー2a-1</a>
<a href="link.htm">サブメニュー2a-2</a>
<a href="link.htm">サブメニュー2a-3</a>
</div>

<A href="javascript:void(0);" id="mmc0102-01" onMouseover="showSubmenu(this.id)">メインメニュー2b</A>
<div class="submenu" id ="s_m0102-01">
<a href="link.htm">本文</a>
<a href="link.htm">サブメニュー2b-1</a>
<a href="link.htm">サブメニュー2b-2</a>
<a href="link.htm">サブメニュー2b-3</a>
<a href="link.htm">サブメニュー2b-4</a>
<a href="link.htm">サブメニュー2b-5</a>
<a href="link.htm">サブメニュー2b-6</a>
</div>
</div>

<a href="javascript:test();">Click Here</a>

</BODY>
</HTML>
1   名前： 牛若 ： 2007/01/25（木） 12:49  ID:ObZ/KHYW sub-Ds
innerHTML以前にそのコードで取得できたことが私には奇跡に思えますが。
もちろん、innerHTMLは非標準ですが、それは置くとして・・・

2   名前： 匿名 ： 2007/01/25（木） 12:49  ID:4N1QN0WR sub-kJ
innerHTML に関する標準規定は存在しない。ある実装はオリジナルのマークアップを返すかもしれないし、別の実装は DOM ツリーからマークアップ文字列への変換結果を返すかもしれない（上記を見れば明らかなように、型妥当どころか整形式である保証すらない）。

そもそも属性は順序を持たない。実装が属性を並べ替えたとしても、何の問題もない。それで何か問題が生じるのだとしたら、やり方に問題がある。


> 任意の要素範囲のHTMLテキスト

普通に DOM ノードを取得すれば良いと思うが、どうしてもマークアップ付きの文字列が必要なのだろうか。最終的に何がしたいの？
3   名前： 匿名 ： 2007/01/25（木） 12:49  ID:4N1QN0WR sub-kJ
もう一つ、大事な話。

> //---------------……

script 要素内をコメントアウトするなら、以下の点に注意。

<script type="text/javascript">
<!-- 無視行

コメント内

//-- コメント外 -- コメント内 -- コメント外 -- コメント内

//-->
</script>


-- の数を確認してみれ。スクリプトがコメント外に書かれているので、コメントアウトの意味がない。

だが、もっと大事な点として、HTML 4.01 以降はコメント内に 2 つ以上連続するハイフンを書いてはいけない。だから、

・コメントアウトするのなら、その中でハイフンを使うな（デクリメント演算子 -- も不可）。

そもそも IE しか対象にしないならば、コメントアウトの必要など全くないのだが。
4   名前： minx ： 2007/01/25（木） 12:49  ID:u7OKXWvF sub-vK
ありがとうございます。
innerHTMLに関する標準規定が存在しないとの事、分かりました。そんな事があるなんて知りませんでした。

最終的には、特定のIDの中の文字列のバイト数を計算し、メニュー幅を動的に設定する、という事をしたかったのです。そうすれば、個々にwidthの設定をしなくて良いので。
（上記の例では、mainmenuとsubmenu別に文字列をさらってくる必要があったので、innerTextでは難しいと考えています。）

この方法はやめて方向転換し、今はスプレッドシート上で文字列のバイト数を取得しながらコードを自動生成しています。

一覧へ戻る