WEBサイトの製作、管理、とかの日記ブログです。

<<   2018年08月   >>
SunMonTueWedThuFriSat
   1234
567891011
12131415161718
19202122232425
262728293031 
新着記事
カテゴリ
過去ログ
コメント
検索
Node.contains便利!
JavaScriptのNode.contains便利!
どこかでこれの存在見たことあった気がしたんだが、発見出来なくて今までparentNodeをループで確認してたわ。

if(ancestor.contains(descendant)){
  descendantはancestorの子孫、又は同一
}else{
  descendantはancestorの子孫ではない
}
ってな感じ。

ノードの比較なんでテキストノードなんかでもできると思うが、2つの要素を比較して子孫か動か判別できる。
引数が子孫か同一の場合はtrue。違う場合はfalse。

parentNodeを使った比較だと1個上の要素との比較しかできないので内包されているか確認するのにはループして一番上まで確認する必要があるが、一発。
しかも、parentNodeが存在しない場合の例外処理も入れる必要がない。

Firefoxは9.0からの様だから昔はダメだったようだが、IEは5.0からで主要ブラウザ最新版ならどれも使えそう。

イベントの発火要素を処理する場合はあまり使わないと思うが、Rangeを処理する場合に、
Range.commonAncestorContainer(Rangeの開始位置と終了位置の共通親要素)
が特定要素に含まれてるか確認するのに使える感じ。
かなりコード量減らせた。

あと、addEventListener使うときによく、
(function(var){
  element.addEventListener('click',function(){処理},false);
})(var);
の様に書くが、
イベントで発動する処理に引数を渡す時は毎回のようにこんな感じで書いてたが、
要は、
functionは関数の定義だが、function()と後ろに()が付くと関数の実行だから、(function)()だと定義すると同時に即実行となる。
親関数内で定義した変数は親関数を複数回実行しても衝突しないので、親関数内でaddEventListenerが複数回実行され、
複数回実行されるaddEventListenerの間で変数に変化がある場合以外は(function)()する必要はないんだね。

JavaScriptの変数はPerlのlocalの様に子関数から親関数の変数が利用できるから、returnしないなら子関数には引数を渡す必要はない。
ってのと、addEventListenerなどで実際に処理されるタイミングを考えて、記述した位置から親関数の末尾までに変化がなければ引数渡さなくていいわけだ。
不要な部分はシンプル記述に修正して、これでもコード量減らせた。

これらで、75kBほどのスクリプトが1kBほど減った。

この記事へのコメント
名前:
URL
コメント:
この記事へのトラックバック :
whblog 1.7