2015

3

20

JavaScriptの基本操作パターンおさらいしてやんよ!!!

スポンサードリンク

jQueryによるDOM操作は記述も簡単で確かに便利ですが、ページによってはわざわざjQueryのCDNのリクエストをする必要すらないくらいの些細な操作で済むシチュエーションもやはりでてきたりします。
jQueryに依存し過ぎて、プレーンなJavaScriptに苦手意識を持ち過ぎてしまわない様に、プレーンなJavaScriptの基本操作パターンをおさらいしたいと思います。

ドキュメント操作系

指定要素を選択【getElementById 】

「document.write」を実行してしまうとWebページ内容がすべて消えてしまうのでページの一部だけを書き換えられるのが便利。

JavaScript

//指定IDに生成したい文字列を代入
document.getElementById("block_01").innerHTML = "このテキストはJavaScript"から出力しました";

HTML

<div id="block_01">
<!--ここに出力されます-->
</div>

複数の要素を選択する【getElementsByClassName】

JavaScript

//操作したい指定class名を宣言
var element= document.getElementsByClassName("block_02");
//class名「block_02」の最初の要素に追加※配列の最初は0
element[0].innerHTML = "最初の追加";
//class名「block_02」の３番目の要素に追加
element[2].innerHTML = "最後の追加";

HTML

<p class="block_02"><!--「最初の追加」が出力されます--></p>
<p class="block_02">追加なし</p>
<p class="block_02"><!--「最後の追加」が出力されます--></p>
<p class="block_02">追加なし</p>

要素を生成・追加する【createElement / appendChild】

JavaScript

//生成したい要素を宣言
var new_node = document.createElement("li");
//指定ID要素内に宣言した新規要素を生成
document.getElementById("block_03").appendChild(new_node);

HTML

<ul id="block_03">
<li>リスト１</li>
<!--ここに<li>が出力されます-->
</ul>

要素を削除する【removeChild】

JavaScript

//削除対象のclass名を宣言
var element = document.getElementsByClassName("nd");
//指定した親要素の宣言したclass名要素を削除
document.getElementById("block_04").removeChild(element[0]);

HTML

<ul id="block_04">
<li class="nd">削除される要素です</li>
<li class="nd">削除されない要素です</li>
</ul>

HTMLの要素を置換する【replaceChild】

JavaScript

//置換対象となる要素を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);

HTML

<div id="block_05">
<p id="change">このテキストが画像に置換されます</p>
</div>

スタイル関連

CSSを操作する【style】

JavaScript

//装飾を変更したい要素を指定
var dv = document.getElementById("block_06").style;
//文字色を指定
dv.color = "#ff0000";
//文字サイズを指定
dv.fontSize = "3em";

HTML

<p id="block_06">赤文字のサイズが3emで装飾されます</p>

CSSセレクタで操作【querySelector / querySelectorAll】

CSSセレクタと同様の記述ルールで装飾対象を指定できます

JavaScript

//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";

HTML

<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>

ブラウザ・ウィンドウ系

ページ読み込みが終了したら処理を開始する【onload】

ブラウザがページを構成するHTML要素・CSS・画像などの要素がすべて読み込まれた後に実行されます。

HTML

<body onload="関数名()">
<!--bodyタグ内の要素がすべて読み込まれた後に実行されます-->
</body>

HTML要素の読み込みが終了後に処理を開始する【DOMContentLoaded】

onloadとは異なりHTMLの解釈が終わったら呼び出されるメソッドでonloadより早いタイミングで処理が開始されます。
getElementByIdメソッドの様に、命令するタイミングよっては読み込まれる前に実行してしまうと、操作対象となる要素が見つけられずにエラーとなってしまう事態を回避できます。

HTML

window.addEventListener("DOMContentLoaded", function(){
  //サイズの大きい画面の読み込み時のロード処理とか書く。
}, false);

マウスカーソル位置の取得【clientX / clientY】

ブラウザwindow内でマウス操作をしている際に、マウスカーソルの現在位置を取得することも可能です。
マウス移動時に発生するイベント関数onmousemoveからＸＹ座標を常に取得するユーザー定義関数と連動させることで、リアルタイムに位置を取得し続けることも可能です。

JavaScript

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;

HTML

ブラウザＸ座標：<span id="block_08_a"></span>
ブラウザＹ座標：<span id="block_08_b"></span>

強制的に遷移させる【location】

指定したwebページに自動遷移させます。ローカル環境でhtmlファイルを直接開いた際にプロトコルを確認して強制的にリンクさせることも可能です。

JavaScript

function foo(){
	if(location.protocol == "http:"){
		location.href = "http://tokidoki-web.com/";
	}else{
		alert("file：プロトコルなので移動を中止しました");
	}
}

HTML

<body onload="foo()">

別ウィンドウでページを開く【open】

外部リンクとは別に新規ウィンドウのサイズ等の設定をした上で開く・閉じるをコントロールすることもできます

JavaScript

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();
}

HTML

<button onClick="foo()">別ウィンドウで開く</button>
<button onClick="bar()" id="btn">別ウィンドウを閉じる</button>

キーボード操作を感知する【onkeydown / onkeypress / onkeyup】

押されたキーによってHTML要素を操作することもできます。

JavaScript

//外枠の装飾
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;
	};
		
}

HTML

<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

Related posts:

  1. スマホやブラウザの画面サイズや向きを取得してやんよ!!!
  2. HTML5のWeb Storage使ってスケジュール表作ってやんよ!!!
トップへ