※スマホ対応はしてません。

タグ: 目次

DOMおれおれAdvent Calendar 2015やります。ひとりで。

カテゴリー: JavaScript

またやります。API紹介とか、小さい感じでやっていきたい。

禁句: 「今さらDOMかよ」

2015-12-00

  1. innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。
  2. querySelector()を使うとjQueryみたいにセレクターで要素を取得できるよ。
  3. el.matches()で要素が目的のものか確認できるよ。
  4. el.closest()で直近の要素を探せるかもね。
  5. クラス操作はclassListで楽々です。
  6. removeChilde()で要素を削除できるけど、面倒だよね。
  7. 属性の操作はsetAttribute()とかremoveAttribute()とか、あとattributesで。
  8. 要素以外にもノードはあるので、nodeType見て確認してね。
  9. textContentでjQueryみたいに文字列で取れるけど、ちょっと注意が必要ね。
  10. 各種ノードの作り方と表示のさせ方をまとめておきました。
  11. 細かい文字列ノードが邪魔なら正規化 (normalize) してみては。
  12. ノードと要素は別物なので気を付けよう。
  13. NodeListとHTMLCollectionも別物なので気を付けよう。
  14. ツリーを歩き回るならTreeWalkerはどうかな。
  15. isEqualNode()で構成が同じか確認できるよ。
  16. compareDocumentPosition()で要素の位置を比較できるよ。
  17. data属性を扱うならdatasetで楽ちん。
  18. jQueryのon()をDOMでやるとaddEventListener()。ちょいと面倒だな。
  19. イベントに関係する要素は教えてもらえるよ。
  20. イベント監視中にできる事ふたつ。
  21. イベント監視で教えてもらえる情報いろいろ。(共通系編)
  22. jQueryのtrigger()みたいに、イベントを作ったり発火させたりしてみよう。
  23. DOMでjQuery風ライブラリーを自作するための基本戦略です。
  24. DOMを使って、jQueryなしでいろいろやってみよう。コピペでどうぞ。

去年まで

JavaScriptおれおれAdvent Calendar 2014やります。ひとりで。

カテゴリー: JavaScript

去年は挫折したので、今年は去年よりはたくさん書きたいなーと思っています……。

  1. JSファイル全体を括るfunctionについての話。
  2. jQuery用の変数の命名の話。
  3. 小規模JS実装の自分的基盤パターンの話。
  4. HTML5 Canvasで、RGB値を入れ替えるサンプルの話。
  5. CDNの話。
  6. 関数プロパティの命名の話。
  7. “isFinished”みたいな命名は関数に限定したい話。
  8. シェアボタン等各種のまとめ。
  9. (おやすみ)
  10. (おやすみ)
  11. (おやすみ)
  12. (おやすみ)
  13. (おやすみ)
  14. (おやすみ)
  15. (おやすみ)
  16. 変数の命名の話。
  17. 最初にドキュメントから書く話。
  18. ModelとViewに分ける設計の話。ちょい難しめ。
  19. (おやすみ)
  20. (おやすみ)
  21. スクロールで何かするための処理まとめ。
  22. (おやすみ)
  23. 意識の低いモジュールっぽい設計の話。
  24. JavaScript設計の世代と近未来の話。