┗━DOM操作
バインドサンプル <input type="button" value="ボタン1" onclick="sampleFun1()" /> <script type="text/javascript"> function sampleFun1() { alert("sampelFun1"); } </script> <input type="button" id="btn2" value="ボタン2"/> <script type="text/javascript"> function sampleFun2() { a…
navigatorのgeolocation属性は、HTML5からブラウザの位置を取得できる。 Geolocationのメソッド getCurrentPosition(onSuccess, onError, options) int watchCurrentPosition(onSuccess, onError, options) clearWatch(watchId) Callback関数function(positi…
javascript内のdocumentは、HTMLDocumentでもあり、DHTMLのオブジェクトでもある。 DHTMLのdocumentのメソッド close() open() write() writeln() DHTMLのdocumentの属性 all anchors applets cookie documentElement forms frames images lastModified link…
windowのscreen属性は、Screenオブジェクトであり、ディスプレイを表す。 属性値取得 <script type="text/javascript"> alert(window.screen); var str = "screen属性:\n"; for(var propname in window.screen) { str += propname + ": " + window.screen[propname] + "\n" } alert(str); </script> w…
windowのhistory属性は、Historyオブジェクトである。 メソッド back() foward() go(intValue) windowのlocation属性は、Locationオブジェクトである。 属性 hostname href host port pathname protocal <script type="text/javascript"> var loc = window.location; var locStr = "現在loca…
windowオブジェクト <script type="text/javascript"> // グローバル変数定義時は、windowsの属性として存在する var a = 5; document.write(window.a === a); window.book = "windowのbook属性"; document.write("<br>" + book); </script> ※ 複数のframeがある場合には、複数のwindowがあるので、グ…
DHTMLは、DOM(Document Object Model)前の動的にHTMLを変更する技術である。 DHTMLのモデル関連 window : javascriptのトップオブジェクト。 navigator : ブラウザ frames location : ページURL hisotry : 履歴 document : HTML all body forms anchors link…
HTML要素削除 メソッド removeChild(oldNode) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> removeChild </title> </head> <body id="test"> <input id="add" type="button" value="div追加" disabled onclick="add();" /> </body></html>
HTML要素を追加する手順 1 node生成 OR node複製 document.createElement(Tag) <script type="text/javascript"> // divタグ生成 var div1 = document.createElement("div"); </script> Node colneNode(boolean deep) deep : 対象node以降をクローンするか <script type="text/javascript"> // IDで要素取得 var ul = document.getEle…
通常HTML要素変更に使う属性 innerHTML value className style options[index] <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> HTML要素変更 </title> </head> <body> 第<input id="row" type="text" size="2" />行 第 第<input id="column" type="text" size="2" />列 <br/> 値を…</br/></body></html>
DOM(Document Object Model) アクセス方法 要素IDでアクセス : document.getElementById(idVal) 要素間の関係でアクセス Node parentNode Node previousSibling Node nextSibling Node childNodes Node getElementsByTasName(tagName) Node firstChild Node …
