はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

トップ > Chrome > 「2日でできる JavaScriptTraining」をやってみた（DOM操作）

「2日でできる JavaScriptTraining」をやってみた（DOM操作）

Chrome JavaScript jQuery Node.js

「2日でできる JavaScriptTraining」をやってみた（DOM操作）

mixi の「2日でできる JavaScriptTraining」をやってみたのでメモ。 今回は、DOM操作のみまとめておきます。

github.com

環境構築

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 要素を取得するトレーニング

最後（エクストラステージ）の 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 もある。

    参考：Online and offline events | MDN

参考：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 になる。

 falsetrue
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() {
  //処理
});

参考：DOMContentLoaded | MDN