めも。

document.querySelector()メソッドを用いる。

例えば下記のようなHTML要素を取得したい場合。

<div class="target">Click</div>
<span id="target">Click</span>

下記の通り、CSSと同様のセレクタを渡すことで要素を選択してくれる。

var div = document.querySelector('.target');
var span = document.querySelector('#target');
console.log(div, span);

document.querySelector()は同一の要素が複数ある場合、最初にマッチした要素のみを返却する。
そのため下記のように一致する要素全てを取得したい場合はdocument.querySelectorAll()を用いるとよい。

■HTML

<div class="target">Click1</div>
<div class="target">Click2</div>
<div class="target">Click3</div>
<div class="target">Click4</div>
<div class="target">Click5</div>
<div class="target">Click6</div>

■Javascript

var divs = document.querySelectorAll('.target');
console.log(divs);

めも。

例えば以下のようなボタン要素に対して複数のイベントをバインドさせたい場合。

<button class="js_btn">Click</button>

下記の様にaddEventListener()メソッドを用いることで同時に複数のメソッドを結びつけることができる。

<script>
var obj = {};

obj.hoge = function(){
	alert('hoge');
}

obj.piyo = function(){
	alert('piyo');
}

obj.fuga = function(){
	alert('fuga');
}


$(function(){
	var btn = document.querySelector('.js_btn');
	btn.addEventListener('click', obj.hoge, false);
	btn.addEventListener('click', obj.piyo, false);
	btn.addEventListener('click', obj.fuga, false);
})
</script>

めも。

// 言語情報やユーザーエージェントなどの情報が格納されている
window.navigator

// URLに関する情報が格納されている
window.location

// ブラウザ履歴を戻るback()メソッドや進めるforward()メソッドなど、履歴操作に纏わるメソッドが格納されている
window.history

// 表示している画面の幅、高さ、色数などの情報が格納されている
window.screen

// 画面内に複数のフレームが存在している場合、そのフレームへの参照が格納される
window.frames

// レンダリングされているDOMが全て格納される
window.document

たとえば。

> window.navigator.userAgent
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36"

> window.screen.width
1440

といった具合に情報を取り出すことが出来る。

めも。

console.trace();

変数のデバッグ時はconsole.log()関数を用いるが、その関数がどこから呼ばれたのかを詳細に表示したい場合は、console.trace()関数を用いるとよい。
console.trace()はトリガーになったイベントがどのオブジェクトのものであるかまで判明するため、イベントドリブン形式でプログラムを記述している場合は非常に有用。