読者です 読者をやめる 読者になる 読者になる

むずかしいことはわかりません

いろいろ書いてるみたいな

パーフェクト Javascript を読み始めた。 - 10

パーフェクトJavaScript (PERFECT SERIES 4)

パーフェクトJavaScript (PERFECT SERIES 4)

まだ読んでます。

  • ノード
    • getElementById
    • getElementsByTagName
  • ライブオブジェクト
    • 動的に要素を追加できる
    • 大きさを変えたらサイズが変わる
      • 先に追加前のサイズを調べておけば無限ループしない
  • NodeListオブジェクト
    • サイズの取得でパフォーマンスが変わる
    • arrayに変化した方が効率が良い
  • 親、子、兄弟ノードの検索と取得
    • parentNode
    • childNode
    • firstChild
    • lastChild
    • nextSibiling
    • previousSibiling

リスト9.11/9.12の構造はこんなかんじ?

  • 空白もテキストノード
  • XPath
    • 柔軟にノードを指定してPathを生成する
  • ノードの作成追加
    • 動的な生成ができるので必要なときにノードを生成追加できる
    • ノードにツリーを追加して初めて表示できる
      • createElement,createTextNode
      • appendChild, insertBefore
  • ノードのプロパティを変更されるとドキュメントに反映される
    • replaceChildでノードごと置換できる
  • ノードの削除にはremoveChildを使う
  • innerHTML/textContent
    • 多くの要素を一度に変更できる
    • textContentはテキスト要素だけを取得、設定する
      • textContentはDOM3Coreで定義
  • fragment
    • createDocumentFragment
    • fragmentに追加していって、最後に一気に書き換えることで無駄な描画を減らせる
  • イベント要素
    • HTML要素、DOM、EventTaget.addEventListener
  • HTML要素イベント
    • onClick/ondblclick
    • onmousedown/onmouseup/onmousemove/onmouseout/onmouseover
    • onkeydown/onkeypress/onkeyup
    • onchange/onblur/onfocus/onselect/onsubmit/onreset
    • onload/onunload
    • onabort/onerror
    • onresize
  • DOM
    • DOMに設定するのは関数そのもの
  • EventTaget.addEventListener
    • キャプチャリングフェーズ
    • バブリングフェーズ
  • handleEvent
    • 本来はイベント処理用の関数
  • this
    • イベントハンドらを設定した要素自身
  • mousemove
    • mousemoveイベントは、頻繁に起こるのでここに重いイベントを入れると動作が遅くなる
  • イベントの順番
    • キャプチャリング
      • DOMツリーを下にたどってイベントを伝えていく
    • ターゲット
      • イベントターゲットのリスナが実行される
      • HTMLタグのイベントリスナ
      • オブジェクトのプロパティのイベントリスナ
    • バブリング
      • イベントターゲットからDOMツリーを上にたどる
      • イベントによっては上へ行かないものもある
    • ストップ
      • stopPropagationを指定するとその要素で実行をやめる
      • 次以降の要素にイベントを知らせない
    • stopImmediatePropagation
    • Event.preventDefault
      • 標準処理をキャンセルする
      • フォーカスが移動した際に発生するblurイベントはキャンセルできない
  • イベントリスナ/ハンドラにはイベント自体が引数で渡る
    • イベントオブジェクトはEventインターフェースを実装
  • 独自イベントの実装
    • createEvent→独自イベントの作成
    • initEvent→イベントタイプの指定
    • dispatchEvent→イベントの実行
  • setTimeOutを使うことで定期的な実行ができる
  • dispatchEventで実行させることができると、addEventListenerで追加して汎用的に使える