「2日でできる JavaScriptTraining」をやってみた（DOM操作）
「2日でできる JavaScriptTraining」をやってみた（DOM操作）
mixi の「2日でできる JavaScriptTraining」をやってみたのでメモ。 今回は、DOM操作のみまとめておきます。
環境構築
Node.js を使っているのでインストールしておく。
既にインストールしている場合、最新にしておく。
npm update -g npm
また、gulp や bower などのモジュールも使用しているので、 エラーが出る場合、適宜インストールしておく。
npm install -g gulp
npm install -g bower
動作したバージョンを以下にに書いておく。
-
Chrome 46.0.2490.86 m (64-bit)
-
Node.js v5.0.0
-
npm 3.4.1
-
gulp version 3.9.0
-
bower 1.6.5
-
-
mixi-inc/JavaScriptTraining at 2015-example-solution · GitHub のリポジトリをfork , git clone して、以下のコマンド。
cd JavaScriptTraining
npm install
以下のコマンドでサーバを立ち上げる。 （おそらくgulpを使っている。）
npm run serve
http://localhost:8000 でアクセスできる。
1.DOM 要素を取得するトレーニング
-
document.getElementById()
id名を指定。 -
document.getElementsByClassName()
class名を指定。配列ライクなNode list を返す。 -
document.getElementsByTagName()
タグ名を指定。配列ライクなNode list を返す。 -
document.querySelector()
jQuery のように要素を指定できる。 data属性も指定できる。 複数ある場合は先頭の要素を返す。 -
document.querySelectorAll()
該当する要素をすべて返す。配列ライクなNode list を返す。
最後（エクストラステージ）の x-flying-sushi-monster は、WebComponents で 独自タグを作っている。 定義は、analytics.js に書いてある。 アニメーションは、style.webkitAnimation^ プロパティ を使用している。
2.DOM 要素の属性・テキストを変更するトレーニング
.textContent
innerHTML と似ているが、タグがあってもテキストのみ 取得できる。jQuery では.text()メソッドになる。
<div id="divA">This is <span>some</span> text</div>
var text = document.getElementById("divA").textContent;
console.log(text); //"This is some text"
var inner = document.getElementById("divA").innerHTML;
console.log(inner); // This is <span>some</span> text
参考： Node.textContent - Web API インターフェイス | MDN
.style.alpha
透明度の変更。
.style.transform
translateY(-20px) や rotate(10deg) を指定できる。
3.DOM の構造を変更するトレーニング
要素の削除
.removeChild()
すべての要素を削除
Node List は配列ではないので、 forEachが使えない。forEach, map, reduce など を使うには配列に変換する必要がある。 簡単な方法はArray.apply() を使う方法。
var parent = document.querySelector('.parent');
var nl = document.querySelectorAll('.class-name');
Array.apply(null, nl).forEach(function(e, i, arr){
parent.removeChild(e);
});
Array.prototype.slice.call() でも同じことができる。
Array.prototype.slice.call(arrayLike).forEach(function(e, i, arr){
parent.removeChild(e);
});
jQuery では.remove() に該当。
最後に要素を追加
.appendChild()を使う。 jQuery では、.append()に該当。
最初に要素を追加
jQuery では、.prepend()。 JavaScript では、.insertBefore() を使う。
var parent = document.querySelector('div');
var child = document.querySelector('.child');
parent.insertBefore(child, parent.firstChild);
参考：Node.insertBefore - Web API インターフェイス | MDN
4.DOM イベントを利用するトレーニング
イベントの種類
-
dblclick: 要素上でダブルクリックされたとき
-
mousemove: 要素上でポインタが移動しているとき
-
scroll: 画面がスクロールされたとき
-
unload: 次のページに遷移する直前
-
keydown: キーボードが押されたとき
-
animationstart: CSS アニメーションが開始したとき
-
offline: ブラウザがオフラインになったとき
online もある。
参考：Event reference - Webテクノロジーのリファレンス | MDN
DOMイベント実装の種類
-
addEventListener スタイル
button.addEventListener('click', function(event) { alert(event); }); -
イベント属性スタイル（AngularJS では よく使われているらしい）
button.onclick = function(event) { alert(event); }; -
インラインイベントハンドラースタイル
<button onclick="alert(this)"></button>
伝播（発火）の仕組み
親要素内の子要素にイベントが発生したとき、 以下のフェーズで伝搬する。
-
capturing フェーズ
ルート要素からイベントの対象要素まで降りていく。
-
target フェーズ
イベントの対象要素に到着。
-
bubbling フェーズ
イベントの対象要素からルート要素まで昇っていく。
-
ブラウザ既定の処理がおこなわれるフェーズ
リンクなどによる画面遷移がおこなわれる。
伝播は2種類あり、 addEventListener() の 第3引数(useCapture) で変更できる。 何も指定しなければfale になる。
| false | true | |
|---|---|---|
| 1 | capturing フェーズ | |
| 2 | target フェーズ | target フェーズ |
| 3 | bubbling フェーズ | |
| 4 | ブラウザ既定の処理 | ブラウザ既定の処理 |
特に指定しなければ target → ルート要素の順番、 指定があれば ルート要素 → target の順番に伝播することになる。
参考：EventTarget.addEventListener - Web API インターフェイス | MDN
ページを読み込む際のイベント
よく使うもので、window.onload がある。
window.onload=function(){
// 処理
};
別のやり方では、DOMContentLoaded イベントがある。 画像の読み込みを待たずにイベントが発生する。 DOMの作成のみ待てばいい場合はこちらを使ったほうが早い。
document.addEventListener('DOMContentLoaded', function() {
//処理
});
参考リンク