DOM(DocumentObjectModel）

  • DOM制御: <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>CSSを操作する１</title> <!--ここからJavaScript--> <script> //ボタンを押すと実行されるfunction xyz=7; function addNode(){ xyz=xyz-1; //追加する子ノードを生成する var CHILD = document.createElement("p"); //子ノードの属性を指定する。IDをCLDとする CHILD.setAttribute("id","CLD"); //このノードのタグで囲まれた部分のテキストを設定する CHILD.innerHTML = "これが"+xyz+"番目に追加されたpタグ領域です"; //どこに追加されるのか、親ノードを指定する var PARENT = document.getElementById("123"); //これが子ノードを追加する命令 appendChild(CHILD)では書き出しが最後になる //下式は子ノードの先頭に挿入の意味 //PARENT.insertBefore(CHILD,PARENT.firstChild); //別方式の挑戦、次に式では(0と1は同じで前に、2と3が同じで後ろに来る alert(xyz); PARENT.insertBefore(CHILD,PARENT.childNodes.item(xyz)); //書き出された子ノードにCSSを後付で指定する //先ずは、getElementByIdを使って追加したノードを抽出する var CLD = document.getElementById("CLD"); //CSSでcolor:#ff0000;と指定するのと同等 if(xyz==0){ CLD.style.color="#ff0000"; } if(xyz==1){ CLD.style.color="#ffff00"; } if(xyz==2){ CLD.style.color="#ffffff"; } if(xyz==3){ CLD.style.color="#0000ff"; } if(xyz==4){ CLD.style.color="#00ffff"; } if(xyz>4){ CLD.style.color="#000000"; } //CSSを使ってボタンを消す //document.getElementById("BTN").style.display = "none"; } </script> <!--ここまでがJavaScript--> </head> <body> <h1>ノードを追加します</h1> <!--idを指定する--> <div id='123'> <p>１番目のp</p> <p>２番目のp</p> <p>３番目のp</p> <p>４番目のp</p> </div) <div> <p>ここはHTMLで書き出されているテキストです。<br> ボタンを押すと、この上に赤いテキストが追加されます<br> ボタンは1回押すと押せなくなります</p> </div> <button id="BTN" onClick="addNode();">見出しの下にテキストを追加します</button> </body> </html>

2012年5月10日 9:47 PM | カテゴリー：習作HTML5 | コメント（0）

« »