[js] IE の罠 ( innerHTML )

IE の JavaScript では、TABLE関係要素の innerHTML は読み取り専用の仕様。

例えば、

var td = document.getElementsByName("td")[0];

td.innerHTML = 置き換えたい文字列;

とやっても、td 要素の持つテキストノードを変更してあげることができません。

DOMのAPIを使って、

var tr = docuemnt.getElementsByName("tr")[0];

var old_td = tr.getElementsByName("td")[0];

var new_td = document.createElement("td");

var text = document.createTextNode( 置き換えたい文字列 );

td.appendChild(text);

tr.replaceChild(new_td, old_td);

のようにしてあげないとダメなんです。もちろん、要素を removeChild して、appendChild してもOKですが、いずれにしても面倒には変わりない。どやさぁ。

 

これは絶対、IE の罠だ。罠だ。

[js] IE の罠 ( class属性 )

IE の JavaScript で class属性 をハンドリングする際、

element.getAttribute("class");

とやっても、class属性値 を取得することができません。普通、素直に属性名で取ろうとするでしょぉ。IE だと、

element.getAttribute("className");

としてあげないと、ハンドリングできないんです。class属性に値をセットする場合も同様に、

element.setAttribute("className", 設定する値);

とする必要があります。どやさぁ。

 

これは絶対、IE の罠だ。

[dojo] FloatingPane のタイトルを動的に書き換え

今日は、dojo の FlotingPane のタイトル文字列の動的な置き換えについて、少し。

 

FloatingPaneのWidgetは、

src/widget/templates/FloatingPane.html

に従って表示されます。dojoでは、この画面部品の中で属性として定義している

dojoAttachPoint

に設定されている名称で、DOMのElementをハンドリング可能になっています。つまり、FloatingPaneに限らず、dojo の部品は dojoAttachPoint の名称を利用してElementのハンドリングが可能です。

なので、FloatingPaneのタイトルとして設定されている titleBarText の Node の中身を置き換えてあげれば書き換え可能です。

直接置き換えも可能だと思いますが、FloatingPaneごとにユニークなIDを振って、個別に置き換えるには、下記のようにユニークなIDを振った<span>を置き換えるのが良いかと。

 

var widget = dojo.widget.byId( FloatingPaneのID );

widget.titleBarText.innerHTML = "<span id='hoge'></span>";

としておけば、

document.getElementById('hoge').innerHTML = "書き換えたい文字列";

で置き換え可能です。