テキストの追加
(1)innerHTMLの使用
あらかじめ空のspan要素やdiv要素を作っておき、その要素のinnerHTMLプロパティに文字列を設定。
<![CDATA[
function showMsg(){
var msg = "メッセージの追加";
document.getElementById("msgbox").innerHTML = msg;
}
<form action="#">
<input type="button" value="メッセージを表示" onclick="showMsg()" />
</form>
ここ → <span id="msgbox"> </span>
]]>
(2)nodeValueの使用
span要素が子要素を持たずにテキストである場合のみ使用可能。
<![CDATA[
function showMsg(){
var msg = "メッセージの追加";
document.getElementById("msgbox").firstChild.nodeValue = msg;
}
<form action="#">
<input type="button" value="メッセージを表示" onclick="showMsg()" />
</form>
メッセージ→<span id="msgbox"> </span>
]]>
次のようにspan要素の下にさらに要素がある場合は不可。
<![CDATA[
<span id="msgbox"><u>メッセージの追加</u></span>
]]>
(3)replaceChildの使用
対象とする要素の下に文字列以外のノードが含まれる場合はノードをテキストノードに置き換える。
<![CDATA[
function showMsg(){
var msg=document.createTextNode("メッセージの置き換え");
var span=document.getElementById("msgbox");
span.replaceChild(msg, span.firstChild);
}
<form action="#">
<input type="button" value="メッセージを表示" onclick="showMsg()" />
</form>
メッセージ→<span id="msgbox"><u>ここにメッセージが表示されます</u></span>
]]>
(4)createTextNodeの使用
createElement("span")として作成したspan要素を追加する方法。
(手順)
(a)createTextNode()でテキストノードを作成。
(b)createElement()でspan要素を作成。
(c)appendChild()によりspan要素にテキストノードを追加。
(d)span要素をbody要素に追加。
body要素は getElementByTagName("body")[0]で参照する。
<![CDATA[
function showMsg(){
var msg = document.createTextNode("メッセージを表示");
var span = document.createElement("span");
span.appendChild(msg);
document.getElementsByTagName("body")[0].appendChild(span);
}
<form action="#">
<input type="button" value="メッセージを表示" onclick="showMsg()" />
</form>
メッセージ→
]]>
子要素をまとめて削除
<![CDATA[
function removeChildNodes(node) {
while( node.hasChildNodes() ) {
node.removeChild(node.lastChild);
}
}
]]>
互換モードの判別
ブラウザのモード（標準モードまたは互換モード）をdocument.compatModeプロパティで判別。
標準モード：CSS1Compat
互換モード：BackCompat
<![CDATA[
function isQuirksMode() {
var mode = documnet.compatMode;
if (mode.match(/^CSS\d+Cpmpat$/) ) {
// 標準モード
return false;
}
// 互換モード
return true;
}
]]>
イベントオブジェクトの参照
IEとW3C DOMイベントモデルの差異を吸収してイベントオブジェクトの参照を得る方法。
<![CDATA[
function myFunction(evt) {
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (elem) {
// イベント処理
}
}
}
]]>
＜参考＞
W3C DOMイベントモデルでは、テキストノードがターゲットになることもあります。
テキストノードではなく、その親ノードを取得したい場合は、ノードタイプを判定するコードを追加します。
<![CDATA[
function myFunction(evt) {
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
// テキストノード(タイプが3)か？
if (elem.nodeType == 3) {
elem = elem.parentNode;
}
if (elem) {
// イベント処理
}
}
}
]]>
関数の参照方法は、次の２通り。
<![CDATA[
(1)document.getElementById("myButoon").onclick = proceeClick;
(2)<input type="button" name="myButton" id="myButton" onclicl="proceeClick(event)" />
]]>
