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

パーフェクト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で追加して汎用的に使える