作って納得! DOM 2 Events: Days on the Moon
ブラウザ上でのプログラミングで避けては通れないのがイベント処理。その仕組みは DOM Level 2 Events にて規定されています。しかし、とりあえず addEventListener メソッドを使ってはいるものの、それがどのような意味を持つか詳しくは知らないといったことはありませんか。そこでここでは、DOM 2 Events のイベントモデルを理解し、ブラウザが裏で何をしているのかを把握するために、実際にそのイベントモデルを実装してみることにします。具体的には、仕様書に定められたインターフェースを JavaScript で実装し、それらを組み合わせてイベントの発生をシミュレートしてみます。 Event インターフェース EventListener インターフェース EventTarget インターフェース DocumentEvent インターフェース DOMException イン
handleEvent、addEventListener - 素人がプログラミングを勉強していたブログ
addEventListenerの第二引数は、関数以外にも、handleEventをメソッドとして持ったオブジェクトも渡すことが出来る。 window.addEventListener("click", { handleEvent: function (e) { console.log(e); } }, false); また、この仕様を利用すると、 ({ run: function () { window.addEventListener("click", this, false); this.counter = 0; }, handleEvent: function () { this.counter++ if (this.counter < 3) alert(this.counter + "clicked!"); else this.destroy(); }, destroy: fun
テキストエリア内のキャレット座標を取得する - Webと文字
1.IE(var6)+Sleipnir(var2.6.1) 参考資料１の通りである。以下のコードで座標位置を取得できる。 var caretPos = document.selection.createRange(); y = (caretPos.offsetTop + document.documentElement.scrollTop); x = (caretPos.offsetLeft + document.documentElement.scrollLeft); サンプル：http://www28095u.sakura.ne.jp/textareacaret/e.html 2.Mozilla FireFox (var2.0.0.11) 参考資料２の方法を使う。 pre要素の作成。あらかじめ作成するか、createElementメソッドで作成する。 テキストエリアのスタイルをgetC
選択範囲の取得について調べた - daily dayflower
はてなスターや Tumblr のブックマークレットなど，ブラウザ上の選択文字列をそのままユーザの入力として使えるサイトが増えています。JavaScript からどのようにすれば取得できるのかを調べてみました。 ブラウザ間の差異 DOM における選択範囲の仕様として以下の 2 通りがあります。 W3C Range Microsoft TextRange IE が Microsoft TextRange のみサポートしているのはまぁ予想通り。注意しなくてはいけないのは，W3C Range は，あくまで DOM 上の「範囲」を示すためのインタフェースであることです。ブラウザ上でユーザがどこを選択しているのか，などは UI の実装になりますから，W3C (Range) では規定されていません*1。そこで W3C Range をサポートしているブラウザは，選択範囲をあらわす W3C Range オブ
フォームコントロールのデフォルト値: Days on the Moon
WebKit のコントロール値キャッシュ対策 「日本野望の会－Yabooo.org > Safari/Webkitのおせっかいキャッシュとその対策。」にコメントしたはずなのですが、いつの間にかコメントが消えているようなので推敲の上再掲。 上記のページで問題にしているのは、Safari において bfcache を無効にしていても、動的に追加したフォームコントロールの値がキャッシュされた値に書き換えられてしまうことです。これに対し、文書中のコントロールをすべて記憶し、文書のアンロード時にそれらの名前 (name 属性の値) を変更することで解決を図っています。 しかし、書き換えられるのは一時的な値のみで、コントロールのデフォルト値 (フォームをリセットしたときに設定される値) まで変化するわけではありません。ならば、コントロールが文書中に挿入されたときに、その値をデフォルト値に設定してやれば
DOM1仕様書
文書オブジェクトモデル(DOM)第1水準 仕様書 Version 1.0 この文書は、W3Cにより作成されW3C勧告として公開されている "Document Object Model (DOM) Level 1 Specification Version 1.0" (http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/) を、どら猫本舗が翻訳したものです。 最新版の仕様書は http://www.w3.org/TR/REC-DOM-Level-1/ にあります。 正式な仕様書はW3Cサイトにある英語版です。この日本語版は参考にすぎません。 この文書には翻訳上の誤りがあるかもしれません。どら猫本舗は翻訳の正確性を保証しません。あくまでご自身の責任でご利用ください。 お気付きの点がありましたらどら猫本舗までお知らせください。 REC-DOM-L
標準DOMスクリプティング - 書籍紹介 - futomi's CGI Cafe
あなたのJavaScriptはWeb2.0時代についてこれるか？ DOMで新時代のWebアプリを目指せ！ クライアントサイドでコンテンツをリッチに操る新技術 Ineternet Explorer 6/7、Firefox 1.5/2.0、Opera9.0、Safari 1.3/2.0対応 futomi の 3 冊目の著書が完成しました！Perl/CGI本、Ajax本に続き、今度は DOM （JavaScript） がテーマです。Webアプリケーション開発には欠かすことができない JavaScript を、DOM という切り口で、実践的なサンプルを通して詳しく解説しました。サーバサイドのアプリケーション開発者だけではなく、ウェブデザイナーまでを巻き込むDOMのテクニックは、ウェブに携わるすべての方に必須のテクニックとなっていくことでしょう。本書は、ある程度 JavaScript を使ったことが
選択範囲のリンクを取得する: Days on the Moon
Web ページの選択範囲に含まれるリンクを取得する方法として、Piro さんによる DOM 2 Range の compareBoundaryPoints メソッドを使ったやり方があります。これはリンクを探すのに DOM Core の機能を使って文書ツリーをたどっていますが、今現在ノードを探すといわれて真っ先に思いつくのは XPath でしょう。そこで、XPath を使って選択範囲のリンクを取得する方法を考えてみました。もちろん、選択範囲を扱う以上 DOM 2 Range も利用します。 基本的な考え方 Range オブジェクトの取得 選択範囲の始点より前にあるリンクの数の取得 選択範囲の終点より前にあるリンクの取得 選択されているようには見えないリンクの除外 まとめ 基本的な考え方 基本的なアイデアは、選択範囲の終点より前にあるリンクで、選択範囲の始点より前にはないものが求めるリンクとい
getClientRects()とgetBoundingClientRect()の違いとその動作のまとめ - terurouメモ
ワタシ、ニホンゴ ニガテ。ダカラ コレ ヨク イミ ワカラナイ。 Element.getClientRects() * 一行一行のボックス情報を取得する Element.getBoundingClientRect * ボーダー辺で囲まれた領域のボックス情報を取得できる getBoundingClientRect()はDrag&Dropを実装する際に使った事があったので、Rectが取得できるヤツだと認識してたけど、getClientRects()とか知らなかった。で、上記の説明を読んだのは良いんだけど、どう違うのかが理解できなかった。 なので、getClientRects()とgetBoundingClientRect()がどういうヤツなのかをメモを残しとく。なお、このメモはあくまでIE6での動作のまとめであって、Firefox3での動作なんて眼中にないのであしからず。 getBoundin
Javascript cssRules - とみぞーノート
1. 概要 Javascriptからスタイルシート内のルールを変更する処理のまとめ。スタイルシートそのものを変更したい場合は「Javascript 動的なCSSの適用」を参照。 2. スタイルシート関連のオブジェクト Javascriptからスタイルシートのルールを操る際に関係するオブジェクトを図1にまとめる。FireFoxとIEで若干扱いが異なるので注意が必要。 2.1 stylesheet オブジェクト まずドキュメント内のスタイルシートを扱うstylesheetオブジェクトがある。stylesheetオブジェクトはドキュメントが読み込んでいるCSSファイルや<style>タグで指定したCSS毎に存在する。 ドキュメント内のstylesheetオブジェクトは全てdocument.styleSheetsに格納されており、document.styleSheets[0]のようにして参照できる
anything from here offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について
結論概要 通常配置要素の絶対座標上の位置を取得するJavascriptコードは、ウエブ上や書籍でかなり流布されている。しかし、それらは正しく絶対座標を提供しないものが多い。 だから仕方なく、コードの進行過程をチェックし、ブラウザ毎に必要となる補正を行うコードを追加し、確実に正しい座標値を得る方法を確立した。そのコードはこのエントリイの末尾に掲載し、検討経過を克明に下記にまとめた。 なお、改訂したコードが対応するブラウザはIE7、FF2及びOpera9であり、safariは検証する術がなかった。 object.offset○○は大変便利なプロパティ それは位置と大きさを与えてくれる。それはマイクロソフトが定義し、Mozzillla系も随随した便利この上ない属性だ。 さて、これらの４つのプロパティは片や位置を、片や大きさを取得する。異なる属性取得を同じoffsetで行うのだ。しかも嫌がらせとし
ブラウザの表示領域のサイズを取得する方法。 - Enjoy*Study
ブラウザの表示領域を取得するに当たって、「ブラウザの種類」×「表示モード(標準/互換)」によって参照するプロパティが変わってきます。 IE、FireFox、Opera、Safariにて、表示モード毎に参照すべきプロパティをまとめてみました。(Safariについては2007/05/20に追記) 調査したのは、下記のプロパティです。 window.innerWidth window.innerHeight document.body.scrollWidth document.body.scrollHeight document.body.offsetWidth document.body.offsetHeight document.body.clientWidth document.body.clientHeight document.documentElement.scrollWidth d
DOM Elementオブジェクトをテキストダンプしてデバッグ - hogehoge @teramako
DOM APIを使用して作ったDOMツリー、うまく生成されているか見てみたい事は多々ある。少なくともオイラはある。簡単にテキスト表示してくれると嬉しいなぁと常々思っていたのだが発見した。 Firefox（というかMozilla系かな）限定だろうけどXMLSerializerがあるのだ。 使い方は簡単。 var serializer = new XMLSerializer(); //略 var root = document.createElement('div'); var anchor = document.createElement('a'); var aText = document.createTextNode('はてな'); anchor.setAttribute('href','http://www.hatena.ne.jp/'); anchor.appendChild( aT
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
slayeroffice | tools | Mouseover DOM Inspector v2.0 Help
Mouseover DOM Inspector v2.0.2 Help Overview The Mouseover DOM Inspector, or MODI for short, is a favelet (also known as a bookmarklet) that allows you to view and manipulate the DOM of a web page simply by mousing around the document. Browsers currently supported are Firefox, Mozilla, Netscape 8, Opera 7.5+ and MSIE6+ on all of their respective Operating Systems. To begin using the Mouseover DOM
Range - Web API | MDN
Range インターフェイスは、ノードやテキストノードの部品を含むことができる文書の範囲を表します。 範囲は Document.createRange() メソッドにより生成することができます。また、 Selection オブジェクトの getRangeAt() メソッドや Document オブジェクトの caretRangeFromPoint() メソッドにより取得することもできます。 さらに、Range() コンストラクターも使用できます。 AbstractRange Range 継承しているプロパティはありません。 Range.collapsed 読取専用 論理値で、範囲の始点と終点が同じ位置にあるか否かを示します。 Range.commonAncestorContainer 読取専用 startContainer と endContainer をともに含む、最も深い Node を
XUL Apps > Tips > 選択範囲のリンクを収集する ～ DOM2 RangeのcompareBoundaryPointsの使い方 - outsider reflex
X-0031 選択範囲のリンクを収集する ～ DOM2 RangeのcompareBoundaryPointsの使い方 2005/4/2 TBEの「選択範囲のリンクを全てタブで開く」などの機能で利用している「選択範囲内のリンクを収集する」処理についての解説です。DOM2 RangeのcompareBoundaryPointsの使い方の解説を含んでいますので、そこだけ見てもOKです。 処理の流れ 選択範囲の取得と、対応するRangeオブジェクトの取得 Rangeの中に含まれるリンクを収集する その1：元のDOMツリーと切り離して処理する場合 その2：元のDOMツリーの中で処理する場合 DOMツリーの走査 そのノードがRangeの中にあるかどうかを調べる 実際の判別 部分選択されたリンクに対する特別な処理 部分選択された「最初のリンク」を選択範囲内に含める 「選択されているようには見えない」リ
Latest > Flakes of Ideas > JavaScriptでDOMを使う――オブジェクト指向入門の入門 - outsider reflex
2003/9/3 2003/9/4 2003/9/5 2003/9/6 はじめに オブジェクトとプロパティ 連想配列 オブジェクトと連想配列 「クラス」というテンプレート オブジェクトとメソッド 特定の型専用の関数 「メソッド」というプロパティ クラスとメソッド 「オブジェクト指向」の簡単なまとめ DOMとオブジェクト指向 「DOM」とは何か？ インターフェースとクラス DOM操作の実例 簡単な処理の例 もっと複雑な処理の例 おわりに Cが分かる人には疑りぶかいあなたのためのオブジェクト指向再入門というページがお勧めです。僕の稚拙な説明よりずっと分かりやすいです。 Home Back to Flakes Prev. Next はじめに JavaScriptでDOMを使う。DOMはHTMLやXMLをスクリプトやプログラムで操作するのにとても便利な技術ですが、簡単なスクリプトくらい書けるからD
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
This Document has Moved
はてなダイアリー - つれずれなるままに… - ざれごと・はてな圧力団体