jQueryによるDOM操作は記述も簡単で確かに便利ですが、ページによってはわざわざjQueryのCDNのリクエストをする必要すらないくらいの些細な操作で済むシチュエーションもやはりでてきたりします。
jQueryに依存し過ぎて、プレーンなJavaScriptに苦手意識を持ち過ぎてしまわない様に、プレーンなJavaScriptの基本操作パターンをおさらいしたいと思います。
//指定IDに生成したい文字列を代入 document.getElementById("block_01").innerHTML = "このテキストはJavaScript"から出力しました";
<div id="block_01"> <!--ここに出力されます--> </div>
//操作したい指定class名を宣言 var element= document.getElementsByClassName("block_02"); //class名「block_02」の最初の要素に追加※配列の最初は0 element[0].innerHTML = "最初の追加"; //class名「block_02」の3番目の要素に追加 element[2].innerHTML = "最後の追加";
<p class="block_02"><!--「最初の追加」が出力されます--></p> <p class="block_02">追加なし</p> <p class="block_02"><!--「最後の追加」が出力されます--></p> <p class="block_02">追加なし</p>
//生成したい要素を宣言 var new_node = document.createElement("li"); //指定ID要素内に宣言した新規要素を生成 document.getElementById("block_03").appendChild(new_node);
<ul id="block_03"> <li>リスト1</li> <!--ここに<li>が出力されます--> </ul>
//削除対象のclass名を宣言 var element = document.getElementsByClassName("nd"); //指定した親要素の宣言したclass名要素を削除 document.getElementById("block_04").removeChild(element[0]);
<ul id="block_04"> <li class="nd">削除される要素です</li> <li class="nd">削除されない要素です</li> </ul>
//置換対象となる要素をid要素を指定 var old_node = document.getElementById("change"); //置換対象を差し替える新規img要素を宣言 var new_node = document.createElement("img"); //新規で生成する画像のパスを指定 new_node.setAttribute("src", "change.png"); //第一引数に新要素、第二引数に旧要素を指定し置換 document.getElementById("block_05").replaceChild(new_node, old_node);
<div id="block_05"> <p id="change">このテキストが画像に置換されます</p> </div>
//装飾を変更したい要素を指定 var dv = document.getElementById("block_06").style; //文字色を指定 dv.color = "#ff0000"; //文字サイズを指定 dv.fontSize = "3em";
<p id="block_06">赤文字のサイズが3emで装飾されます</p>
//class名「attention」が付く要素にすべて装飾を指定します var Attention_all = document.querySelectorAll(".attention"); x = Attention_all.length; for(var i = 0; i < x; i++){ Attention_all[i].style.backgroundColor ="#ff0000"; Attention_all[i].style.color ="#ffffff"; } //id名「one」が指定されているclass名「attention」要素を大文字に var Attention_big = document.querySelector("#one.attention"); Attention_big.style.fontSize ="2em"; //id名「two」が指定されているclass名「attention」要素を小文字に var Attention_small = document.querySelector("#two.attention"); Attention_small.style.fontSize ="0.5em";
<ul id="block_07"> <li id="one" class="attention">大文字の赤背景の白文字になります</li> <li class="attention">赤背景の白文字になります</li> <li id="two" class="attention">小文字の赤背景の白文字になります</li> <li class="attention">赤背景の白文字になります</li> </ul>
<body onload="関数名()"> <!--bodyタグ内の要素がすべて読み込まれた後に実行されます--> </body>
window.addEventListener("DOMContentLoaded", function(){ //サイズの大きい画面の読み込み時のロード処理とか書く。 }, false);
function foo(evt){ var mouseX = document.getElementById("block_08_a"); var mouseY = document.getElementById("block_08_b"); mouseX.innerHTML = evt.clientX; mouseY.innerHTML = evt.clientY; } window.onmousemove = foo;
ブラウザX座標:<span id="block_08_a"></span> ブラウザY座標:<span id="block_08_b"></span>
function foo(){ if(location.protocol == "http:"){ location.href = "http://tokidoki-web.com/"; }else{ alert("file:プロトコルなので移動を中止しました"); } }
<body onload="foo()">
var new_window; var btn; //新規ウィンドウを開く処理 window.onload = function(){ btn = document.getElementById("btn"); } //新規ウィンドウの設定とリンク先 function foo(){ var opt = "height=600, width=980, location=yes,resizable=yes, scrollbars=yes, status=yes"; new_window = open("http://tokidoki-web.com/", "otherWin", opt); } //開いたウィンドウを閉じる処理 function bar(){ new_window.close(); }
<button onClick="foo()">別ウィンドウで開く</button> <button onClick="bar()" id="btn">別ウィンドウを閉じる</button>
//外枠の装飾 var box = document.getElementById("block_99"); box.style.position = "rerative"; box.style.borderWidth = "1px"; box.style.borderColor = "#000000"; box.style.borderStyle = "solid"; box.style.width = "80px"; box.style.height = "80px"; //アイテムの装飾 var element = document.querySelector("#block_99 div"); element.style.position = "absolute"; element.style.top = "30px"; element.style.left = "30px"; //キーボード操作処理 window.onkeydown = function(e){ switch(e.keyCode){ //「↑」キーを押したらアイテムを上移動 case 38: element.style.top = "10px"; break; //「←」キーを押したらアイテムを左移動 case 37: element.style.left = "10px"; break; //「→」キーを押したらアイテムを右移動 case 39: element.style.left = "60px"; break; //「↓」キーを押したらアイテムを下移動 case 40: element.style.top = "60px"; break; //上記以外のキーを押したらアイテムを中央に戻す default: element.style.top = "30px"; element.style.left = "30px"; break; }; }
<div id="block_99"><div>■</div></div>
数字・アルファベット | テンキー数字・記号 | 制御キー | |||
「0」→ 48 | 「A」→ 65 | 「N」→ 78 | 「T0」→ 96 | 「BackSpace」→ 8 | 「←」→ 37 |
「1」→ 49 | 「B」→ 66 | 「O」→ 79 | 「T1」→ 97 | 「Enter / T Enter」→ 13 | 「↑」→ 38 |
「2」→ 50 | 「C」→ 67 | 「P」→ 80 | 「T2」→ 98 | 「Shift」→ 16 | 「→」→ 39 |
「3」→ 51 | 「D」→ 68 | 「Q」→ 81 | 「T3」→ 99 | 「Ctrl」→ 17 | 「↓」→ 40 |
「4」→ 52 | 「E」→ 69 | 「R」→ 82 | 「T4」→ 100 | 「Alt」→ 18 | 「Insert」→ 45 |
「5」→ 53 | 「F」→ 70 | 「S」→ 83 | 「T5」→ 101 | 「Pause」→ 19 | 「Delete」→ 46 |
「6」→ 54 | 「G」→ 71 | 「T」→ 84 | 「T6」→ 102 | 「変換」→ 28 | 「英数」→ 240 |
「7」→ 55 | 「H」→ 72 | 「U」→ 85 | 「T7」→ 103 | 「無変換」→ 29 | 「カタ/ひらがな」→242 |
「8」→ 56 | 「I」→ 73 | 「V」→ 86 | 「T8」→ 104 | 「スペース」→ 32 | 「Esc」→ 243 |
「9」→ 57 | 「J」→ 74 | 「W」→ 87 | 「T9」→ 105 | 「PageUp」→ 33 | 「半角/全角」→ 244 |
「K」→ 75 | 「X」→ 88 | 「T*」→ 106 | 「PageDown」→ 34 | 「Tab」→ 9 | |
「L」→ 76 | 「Y」→ 89 | 「T/」→ 111 | 「End」→ 35 | 「NumLock」→ 144 | |
「M」→ 77 | 「Z」→ 90 | 「T.」→ 110 | 「Home」→ 36 | 「ScrollLock」→ 145 |