Element Traversal API - 三等兵
今更ながらJavaScriptのDOM Core基礎 - 三等兵の付け足し。あの記事長いので重くて開けない。 http://www.w3.org/TR/ElementTraversal/ なんぞ？ firstChildとかlastChildとかが便利になったやつ。空白ノードとかコメントノードとか無駄なノードをよけて、要素ノード(nodeTypeが1)しか手を出しません。 やってみる // js var oda = document.getElementById('love_story'); alert(oda.firstChild.nodeType); // 3(テキストノード) alert(oda.firstElementChild.nodeType); // 1 alert(oda.lastChild.nodeType); // 3(テキストノード) alert(oda.lastEle
nazonoDiary - compareDocumentPosition
で、編集画面が使いにくい（投稿関係ボタンをテキスト・エリアの下に）のを作るときにドキュメントが全然見つからずに苦労したcompareDocumentPositionについて そもそもieだと contains で「エレメントは親子関係にあるか？」が調べられるのだけれど、Mozillaではその関数は定義されてなさそう。Firebugでエレメントを見ているとcompareDocumentPositionというそれっぽい関数を見つけたのはいいが、使い方がさっぱりわからない… DOM関係のドキュメントを調べるときにとても参考になるJavaDocには short compareDocumentPosition(Node other) throws DOMException ドキュメントでの位置について参照ノード (このメソッドが呼び出されているノード) とパラメータとして渡されたノードをドキュメント
DOMNodeInserted と DOMNodeRemoved に似た仕組みを IE でも使えるようにして、セレクタの実行結果をキャッシュする - latest log
セレクタ(id, tag, class, css, xpath)の実行速度を改善するには、2つの方法があります。 ロジックを改善する キャッシュを使う 今日は2の方法について検討したことを書き残します。 心配事 キャッシュを使う上での心配事は「キャッシュが古くなったらどうするか、それをどうやって知るか?」です。 古くなったキャッシュはクリアしなければなりません。 DOM Level2 MutationEvents を使うと、ノードの挿入, 削除と、属性の更新 を取得できる DOM Level2 MutationEvents という仕様があります。これらを活用するとDOMツリーが更新されたタイミングを監視できます。 DOMNodeInserted は ノードの挿入, DOMNodeRemoved は ノードの削除, DOMAttrModified は 属性の変更に対応しています。 各ブラウザ
Document Object Model Range
2. Document Object Model Range Editors Peter Sharpe, SoftQuad Software Inc. Vidur Apparao, Netscape Communications Corp. Lauren Wood, SoftQuad Software Inc. 2.1. Introduction A Range identifies a range of content in a Document, DocumentFragment or Attr. It is contiguous in the sense that it can be characterized as selecting all of the content between a pair of boundary-points. Note: In a text edit
IEでDOM Range扱えるライブラリあった - TakiTakeの日記
ierangeこれはすごい！ あとで、試してみる
リンクになっていないURLを新規タブで開くGreasemonkey Script - os0x.blog
Text URL Linker という Greasemonkey Script を CodeRepos (と Text URL Linker for Greasemonkey) にあげました。Firefox の Greasemonkey, Opera(9.50以降) の UserJavaScript, Safari の GreaseKit, Google Chrome の Greasemetal, Chromium の Greasemonkey で動作します。 はてなダイアリーのコメント欄など、リンクになっていないURL (一応 ttp://hoge のようなURLにも対応) を新規タブで開くリンク(通常のリンクと区別するため overline 入りカーソルをhelp) にする Script です。Firefox の人には Piro さんの Text Link でお馴染みのあれです。同種の
Firefoxで長いURIを折り返す
ANAフィギュア魔改造続き 本体に合わせるためのスカートを切り出した。9代目は青と紫がそれぞれ2体ずつあって、下半身は紫のダブリのものを使って制作していたんだけれども、今度は青のダブリを使った。上半身との接続軸を切り飛ばして、そこからドリルで穴を開けまくって開口。脚が取れたら穴をさらに広げて、内側をくり抜く。作業が非常にやりにくかったんで、後ろのスリットのところで一旦切り離してます。 腰周辺を削って、スカートを組み合わせる時のクリアランスを確保する。しかし腰が小さくなるとボディラインが崩れて醜くなるので、ここは最小限度にしないといけない。代わりに、スカートの内側を可能な限り削り込んで薄く整形している。 で、合わせてみる。スカートの後ろはとりあえずテープで仮止めして様子見。ぱっと見は元の製品状態と変わらないけど……実際、全然変わりません（ぉぃ）。「どうせ下から見てパンチラを楽しむつもりなんだ
url_breaker - あすかぜ・ねっと
url_breaker について Firefox 3 では、デフォルトでURL文字列が折り返し表示されるようになります。 Firefox 3 以降では url_breaker の導入は不要です。 Firefox 2では URL文字列の折り返しが行われないため、長いURLが書かれていると レイアウトが崩れたり横スクロールが発生したりします。 このスクリプトは、記号文字の後ろに自動的に<wbr>タグを挿入することにより、 URL文字列を折り返し可能にします。 テスト用URL（リンク有）→ http://www.asukaze.net/soft/url_breaker/#long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long
JavaScript tutorial - DOM objects and methods
This gives all properties, collections and methods of the W3C DOM that can be reliably used in all major DOM browsers, as well as document.styleSheets, which is much less reliable, but useful if it is available. Contents The document node All nodes Table and associated nodes Stylesheets Events Key Parent object Child object Child property Child object being accessed through a collection[] Event Me
作って納得! DOM 2 Events: Days on the Moon
ブラウザ上でのプログラミングで避けては通れないのがイベント処理。その仕組みは DOM Level 2 Events にて規定されています。しかし、とりあえず addEventListener メソッドを使ってはいるものの、それがどのような意味を持つか詳しくは知らないといったことはありませんか。そこでここでは、DOM 2 Events のイベントモデルを理解し、ブラウザが裏で何をしているのかを把握するために、実際にそのイベントモデルを実装してみることにします。具体的には、仕様書に定められたインターフェースを JavaScript で実装し、それらを組み合わせてイベントの発生をシミュレートしてみます。 Event インターフェース EventListener インターフェース EventTarget インターフェース DocumentEvent インターフェース DOMException イン
XML DOM Parser
XML DOM Tutorial DOM HOME DOM Introduction DOM Nodes DOM Node Tree DOM Parsing DOM Load Function DOM Methods DOM Accessing DOM Node Info DOM Node List DOM Traversing DOM Browsers DOM Navigating Manipulate Nodes DOM Get Values DOM Change Nodes DOM Remove Nodes DOM Replace Nodes DOM Create Nodes DOM Add Nodes DOM Clone Nodes DOM HttpRequest XML DOM Refer
Range - Web APIs | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback The Range interface represents a fragment of a document that can contain nodes and parts of text nodes. A range can be created by using the Document.
JavaScript tutorial - DOM events
This is currently supported by Opera 7+, Mozilla/Firefox, Konqueror 3.0+, Safari/Chrome, Internet Explorer 9+ in standards mode and NetFront 3.3+. It is also partially supported by iCab 3, ICEBrowser 5+, and Tkhtml Hv3. Espial claim that Escape/Evo 5 supports this, but it does not support even the basics. Note: Internet Explorer 8- on Windows does not comply with the standard here, so if you are t
とてもシンプルに自分自身が属する script 要素を取得 - IT戦記
グローバル領域に以下の一行を書く <script> var currentScript = (function (e) { if(e.nodeName.toLowerCase() == 'script') return e; return arguments.callee(e.lastChild) })(document); alert(currentScript); </script>こうすることで、currentScript はこの script 要素を指す。 いちおう説明 DOM は構築されるときに、上から順番に構築される。そして、script タグがあると、 script 要素を構築したあとに、スクリプトを実行する。 つまり、スクリプトが実行されたとき script 要素は今まさに作られたばかりであり、それよりも後ろの要素が存在しない。さらにこの script 要素を含むすべての要
Document Object Model/TextRange
TextRangeオブジェクトの位置と大きさを得られます。 rng.boundingLeft rng.boundingTop rng.boundingWidth rng.boundingHeight 例えば下のようなボタンの文字の、ドキュメントの上からの座標を得ます。 var rng = obj.createTextRange(); //objはボタン alert(rng.boundingTop); TextRange オブジェクトに対しコマンドを実行することができます。 rng.execCommand(sCommand [, bUserInterface [, vValue]]) コマンドの実行が成功すれば true、 失敗すれば false が帰ります。 sCommand がコマンドを表す文字列です。 下に例がありますが、非常に多くのコマンドがあります。詳しくは、 Command I
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
掲示板/JavaScript質問板［過去ログ］/一覧/META情報の取得について - TAG index Webサイト
http://youmos.com/news/css_selector_js
掲示板/JavaScript質問板［過去ログ］/一覧/idとname - TAG index Webサイト
掲示板/JavaScript質問板［過去ログ］/一覧/オブジェクトを配列みたいに扱いたい - TAG index Webサイト
JavaScriptでDOMレンジを扱う：CodeZine