Google Code Archive - Long-term storage for Google Code Project Hosting.Code Archive Skip to content Google About Google Privacy Terms
選択範囲のリンクを取得する: Days on the Moon
Web ページの選択範囲に含まれるリンクを取得する方法として、Piro さんによる DOM 2 Range の compareBoundaryPoints メソッドを使ったやり方があります。これはリンクを探すのに DOM Core の機能を使って文書ツリーをたどっていますが、今現在ノードを探すといわれて真っ先に思いつくのは XPath でしょう。そこで、XPath を使って選択範囲のリンクを取得する方法を考えてみました。もちろん、選択範囲を扱う以上 DOM 2 Range も利用します。 基本的な考え方 Range オブジェクトの取得 選択範囲の始点より前にあるリンクの数の取得 選択範囲の終点より前にあるリンクの取得 選択されているようには見えないリンクの除外 まとめ 基本的な考え方 基本的なアイデアは、選択範囲の終点より前にあるリンクで、選択範囲の始点より前にはないものが求めるリンクとい
選択範囲の取得について調べた - daily dayflower
はてなスターや Tumblr のブックマークレットなど，ブラウザ上の選択文字列をそのままユーザの入力として使えるサイトが増えています。JavaScript からどのようにすれば取得できるのかを調べてみました。 ブラウザ間の差異 DOM における選択範囲の仕様として以下の 2 通りがあります。 W3C Range Microsoft TextRange IE が Microsoft TextRange のみサポートしているのはまぁ予想通り。注意しなくてはいけないのは，W3C Range は，あくまで DOM 上の「範囲」を示すためのインタフェースであることです。ブラウザ上でユーザがどこを選択しているのか，などは UI の実装になりますから，W3C (Range) では規定されていません*1。そこで W3C Range をサポートしているブラウザは，選択範囲をあらわす W3C Range オブ
文字列から要素を作りたいときはinnerHTMLではなくcreateContextualFragmentを使う - 素人がプログラミングを勉強していたブログ
追記：ベンチマークをコメントを元に修正 文字列から要素を作りたい場合、 var temp = document.createElement('div'); temp.innerHTML = '<span>foo bar fizz buzz!</span>'; とやることが多い。 だが、不要なdiv要素ができて気持ち悪いし、for文でchildNodesをひとつずつ処理する必要があって、不便。 divの中にhead要素を入れることはできないので、innerHTML=''としても、要素は作られない。 RangeのcreateContxtualFragmentを使うと、こういった問題を避けることができる。 例えば、上のコードをcreateContextualFragmentを使って書き直すと、 var range = document.createRange(); range.createCon
DOM Rangeについて色々 - Personnel
これまで、Rangeインターフェイスはテキストの選択範囲を操作する、それだけの仕様だと思っていました。しかし、DOM CoreやHTMLでは面倒で、コードが煩雑になりがちだった複数の要素に関する操作が、Rangeインターフェイスを利用することで直感的かつ直接的な操作になり、とても扱いやすくなることが分かりました。現在では個人的に、DOMで文書ツリーを扱う時には常に傍らにいてもらいたい介さんのような存在になっています。取りあえず呼んでおけ、みたいな。 以下、とてもありがちな要素に関する操作を、CoreやHTMLのみを用いた方法とRangeを利用した方法で行い、その比較を行います。 Foot note この記事のURI参照 http://members.jcom.home.ne.jp/jintrick/Personal/DOM_Range.html#MISUNDERSTANDING D
第5回 Prototypeライブラリ（1290～1608行目） | gihyo.jp
コード最後部のElement.addMethods()の呼び出しにより、HTMLElement.prototype以下にメソッドを追加してあるので、個々の要素インスタンスに対して追加する必要は無し 1298行目では、ここで使う変数や、ショートカット関数などを定義しています。 1301行目からは、このブラウザで拡張するべき関数オブジェクトをmethodsオブジェクトに詰め込んでいます。ここでmethodsのプロパティ名が要素に拡張されるメソッド名で、プロパティ値が関数オブジェクトになります。 グローバルなHTMLElementが定義されている場合、F.ElementExtensionsが真となります。この値はIEでは偽ですがFirefox、Safari、Operaでは真になります。真の場合はHTMLElementに定義されているメソッドが使えるのでここで拡張する必要がなくなります。 Elem
DOM Range のテストケースを書きました - IT戦記
W3C で DOM Range という便利なオブジェクトが勧告されています。 http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html DOM Range って何？ DOM Range とは、 DOM ツリーの任意の範囲を表すための仕様です。 DOM Range を使うと、「ここからここまでのノードを全部削除」とか「ここからここまでの要素をここに移動」というような操作が簡単にできます。 もちろん、ノードの途中も選択できます。 また、 DOM Range はコンテンツをマウスなどで選択したときの選択範囲を表す Selection オブジェクトからも使われています。 （ちなみに Selection オブジェクトの仕様は HTML5 で定義されています。 http://www.whatwg.org/specs/web-apps/cu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
