[B! dom] inspiのブックマーク

inspi id:inspi

domに関するinspiのブックマーク (3)

offsetTop/offsetLeft/offsetParentの闇 - Backstage of theater.js
簡単な定義要素のoffsetLeftプロパティ要素の左辺と、offset基準要素の左辺との距離(px) 要素のoffsetTopプロパティ要素の上辺と、offset基準要素の上辺との距離(px) 要素のoffsetParentプロパティ要素のoffset基準要素(これが何になるかが問題) ○結論から先に見たい方は＞＞こちら＜＜○ いままで、なんとなくoffsetTopやoffsetLeftを使っていました＾＾；これらは「ページ上の要素の位置」を格納してると思って。しかし、よくよく調べてみるとそれは誤りであり、かつかなり複雑でややこしいプロパティであることが分かってきました。*1 もともと、(ここでは述べませんが、offsetHeightとoffsetWidthも含め)offset〜のプロパティはIEがVer5で独自に実装したものらしく、その後他のブラウザが追随して実装したようです
inspi 2008/02/04
css

dom
リンク
HTML要素の位置取得 - elm200 の日記(旧はてなダイアリー)
趣旨ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。情報ソースこの問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。基本中の基本として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode
inspi 2008/02/04
css

dom
リンク
JavaScript の要素追加・変更で innetHTML と DOM の速度検証
ちょっと昔に散々でまわったネタなんですけど・・・まぁ自分への備忘録っつーことで。 JavaScript でごにょごにょ動的に見た目を変更する社内ツールがあります。自分が作ったヤツなんですが、最近どうにも動きがモッサリしてきました。解析するまでもなく遅い原因は DOM で要素を追加・削除を大量にやっているのはわかっています。だいぶ前に DOM と innerHTML のどっちが高速化ってのが話題になった時期がありましたが、僕の経験（技を何も使わずに単純に DOM 操作を書く場合。というか普通の人の書き方がココに当てはまると思う。）では圧倒的に innerHTML が高速な場合が多いです。 ※innerHTML vs DOM ネタはこの辺が参考になります。 Javascript - Benchmark - W3C DOM vs. innerHTML 最速インターフェース研究会 :: 日本語テキ
inspi 2008/01/26
プログラミング

パフォーマンス

javascript

dom
リンク
1